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





2 Answers

click 대신 mousedown 이벤트를 시도 할 수 있습니다.

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

이것은 mousedown 이벤트가 click 이벤트와 같은 방식으로 사용자에게 제공되지 않기 때문에 분명히 최선의 해결책은 아닙니다. 안타깝게도 blur 이벤트는 mouseup 이벤트를 취소합니다.

위임 버블링이란 클릭이벤트

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 외에) 있습니까?




mousedown click 할 때 발생하는 동작을 수행하는 것은 나쁜 UX입니다. 대신 효과적으로 click 으로 구성된 것은 무엇입니까? mouseup .

따라서 mousedown 핸들러에서 mousedown 이벤트 전파를 중지하고 mouseup 핸들러에서 해당 작업을 수행하십시오.

ReactJS의 예 :

<a onMouseDown={e => e.preventDefault()}
   onMouseUp={() => alert("CLICK")}>
   Click me!
</a>





Related