javascript 자바스크립트 - 흐림 이벤트로 인해 클릭 이벤트가 작동하지 않습니까?




2 Answers

blur 한 후에 이벤트 트리거를 click 하면 링크가 숨겨집니다. click 수 대신에 mousedown 을 사용하면 효과가 있습니다.

$('.ShippingGroupLinkList').live("mousedown", function(e) {
    alert('You wont see me if your cursor was in the text box');
});

다른 대안은 blur 이벤트에 대한 링크를 숨기기 전에 약간의 지연 시간을 갖는 것입니다. 그게 당신에게 갈 접근법.

Demo

위임 버블링이란

Blur 이벤트가 클릭 이벤트 핸들러의 작동을 중지시키는 것으로 보입니까? 텍스트 필드에 포커스가있을 때만 옵션이 나타나는 콤보 상자가 있습니다. 옵션 링크를 선택하면 이벤트가 발생해야합니다.

여기에 바이올린 예제가 있습니다 : http://jsfiddle.net/uXq5p/6/

재현하려면 :

  1. 텍스트 상자를 선택하십시오.
  2. 링크가 나타납니다.
  3. 링크를 클릭하십시오.
  4. 흐림 현상이 발생하고 링크가 사라집니다.
  5. 다른 일은 일어나지 않습니다.

예상되는 동작 :

5 단계에서 흐려짐이 발생한 후에도 클릭이 발생해야합니다. 어떻게해야합니까?

최신 정보:

잠시 동안 놀고 나면 블러 이벤트로 인해 클릭 된 요소를 클릭 할 수 없게 만드는 경우 이미 발생 된 클릭 이벤트가 처리되지 못하도록 누군가가 큰 힘을 얻었습니다.

예 :

$('#ShippingGroupListWrapper').css('left','-20px');

잘 작동하지만

$('#ShippingGroupListWrapper').css('left','-2000px');

클릭 이벤트를 방지합니다.

이는 요소를 클릭 할 수 없도록 만들면 향후 클릭을 방지해야하지만 클릭 할 수있을 때 이미 발생한 요소는 취소하지 않기 때문에 Firefox의 버그 인 것으로 보입니다.

클릭 이벤트가 처리되지 못하게하는 다른 요소는 다음과 같습니다.

$('#ShippingGroupListWrapper').css('z-index','-20');
$('#ShippingGroupListWrapper').css('display','none');
$('#ShippingGroupListWrapper').css('visibility','hidden');
$('#ShippingGroupListWrapper').css('opacity','.5');

이 사이트에서 유사한 문제가있는 몇 가지 다른 질문을 발견했습니다. 주위에 떠 다니는 두 가지 솔루션이있는 것 같습니다.

  1. 지연을 사용하십시오. 이것은 숨기기 이벤트와 클릭 이벤트 핸들러 사이에 경쟁 조건을 생성하기 때문에 좋지 않습니다. 그것도 엉성함.

  2. mousedown 이벤트를 사용하십시오. 그러나 이것은 click 링크에 대한 올바른 이벤트이기 때문에 좋은 해결책이 아닙니다. mousedown 의 동작은 UX 관점에서 보면 반 직관적입니다. 특히 버튼을 놓기 전에 마우스를 요소 밖으로 이동하여 클릭을 취소 할 수 없으므로 마우스 포인터가 직관적이지 않습니다.

몇 가지 더 생각할 수 있습니다.

3. mouseovermouseover mouseout 을 사용하여 필드의 흐림 이벤트를 활성화 / 비활성화합니다. 마우스가 관련되어 있지 않기 때문에 키보드 탭핑에서는 작동하지 않습니다.

4. 최고의 솔루션은 다음과 같습니다.

$('#ShippingGroup').blur(function()
{
   if($(document.activeElement) == $('.ShippingGroupLinkList'))
      return; // The element that now has focus is a link, do nothing
   $('#ShippingGroupListWrapper').css('display','none'); // hide it.
}

불행히도 $(document.activeElement) 는 클릭 된 요소가 아닌 body 요소를 항상 반환하는 것으로 보입니다. 그러나 어쩌면 하나의 요소가 현재 포커스를 가지고 있는지 또는 두 개가 있는지를 알 수있는 확실한 방법이 있다면 블러 핸들러 내에서 어떤 요소가 블러 링을 일으켰는지 (어떤 요소가 블러 링되지 않았는지) 알 수 있습니다. 또한, 흐리게하기 전에 발생하는 다른 이벤트가 ( mousedown 외에) 있습니까?




4. 최고의 솔루션은 다음과 같습니다.

$('#ShippingGroup').blur(function()
{
   if($(document.activeElement) == $('.ShippingGroupLinkList'))
      return; // The element that now has focus is a link, do nothing
   $('#ShippingGroupListWrapper').css('display','none'); // hide it.
}

불행히도 $ (document.activeElement)는 클릭 된 요소가 아닌 body 요소를 항상 반환하는 것으로 보입니다. 그러나 어쩌면 하나의 요소가 현재 포커스를 가지고 있는지 또는 두 개가 있는지를 알 수있는 확실한 방법이 있다면 블러 핸들러 내에서 어떤 요소가 블러 링을 일으켰는지 (어떤 요소가 블러 링되지 않았는지) 알 수 있습니다.

당신이 찾고있는 것이 e.relatedTarget 입니다. 따라서 링크를 클릭하면 e.relatedTarget 에 link 요소가 채워집니다. 따라서 블러 처리기에서 클릭 된 요소가 컨테이너 내에 있거나 링크와 직접 비교하면 컨테이너를 숨기지 않도록 선택할 수 있습니다.

$('#ShippingGroup').blur(function(e)
{
   if(!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
   // Alt: (!e.relatedTarget || $(e.relatedTarget) == $('.ShippingGroupLinkList'))

       $('#ShippingGroupListWrapper').css('display','none'); // hide it.
   }
}

( relatedTarget 은 이전 브라우저에서 blur 이벤트를 지원하지 않지만 최신 Chrome, Firefox 및 Safari에서 작동하는 것으로 보입니다)




Related

javascript jquery