흐림 이벤트가 클릭 이벤트 작동을 중지합니까?

흐림 이벤트가 클릭 이벤트 작동을 중지합니까?

---

Blur 이벤트로 인해 클릭 이벤트 처리기가 작동하지 않는 것 같습니다. 텍스트 필드에 포커스가있을 때만 옵션이 나타나는 콤보 상자가 있습니다. 옵션 링크를 선택하면 이벤트가 발생합니다.

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

재현하려면 :

1. 텍스트 상자 선택
2. 링크가 나타납니다.
3. 링크를 클릭
4. 번짐도 발생하고 링크가 사라집니다.
5. 다른 일은 없습니다.

예상되는 동작 :

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

최신 정보:

한동안 이것을 가지고 놀다 보면, 블러 이벤트가 클릭 된 요소를 클릭 할 수 없게 만드는 경우 이미 발생한 클릭 이벤트가 처리되지 않도록 누군가가 많은 노력을 기울인 것 같습니다.

예를 들면 :

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

잘 작동하지만

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

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

이 나타납니다 예방해야 요소 않은 클릭하고 이후 파이어 폭스에서 버그가 될 미래의 클릭을하지만, 하지 가 클릭 할 수있을 때 이미 발생한 사람을 취소 할 수 있습니다.

클릭 이벤트 처리를 방해하는 기타 사항 :

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

이 사이트에서 비슷한 문제가있는 몇 가지 다른 질문을 찾았습니다. 두 가지 해결책이 떠 다니는 것 같습니다.

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

2. mousedown이벤트를 사용하십시오 . 그러나 이것은 좋은 해결책이 아니다 중 하나를 보낸 사람 click 입니다 링크에 대한 올바른 이벤트입니다. 의 동작은 mousedownUX 관점에서 볼 때 반 직관적입니다. 특히 버튼을 놓기 전에 요소에서 마우스를 이동하여 클릭을 취소 할 수 없기 때문입니다.

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

3.Use mouseover와 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 요소를 반환하는 것 같습니다. 그러나 1. 어떤 요소에 포커스가 있는지 또는 두 가지 중 하나를 알 수있는 신뢰할 수있는 방법이 있다면, 어떤 요소가 흐림 처리기 내에서 흐림을 일으킨 요소 (어떤 요소가 흐림이 아님)인지 알 수 있습니다. 또한 mousedown흐림 전에 발생 하는 다른 이벤트 (외에 )가 있습니까?

---

click이벤트가 트리거 blur되어 링크가 숨겨집니다. click사용 mousedown하는 대신 작동합니다.

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

다른 대안은 blur이벤트 에서 링크를 숨기기 전에 약간의 지연을 갖는 것 입니다. 갈 방법은 당신에게 달려 있습니다.

데모

---

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

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

This is clearly not the best solution as a mousedown event is not achieved the same way for the user than a click event. Unfortunately, the blur event will cancel out mouseup events as well.

---

Performing an action that should happen on a click on a mousedown is bad UX. Instead, what's a click effectively made up of? A mousedown and a mouseup.

Therefore, stop the propagation of the mousedown event in the mousedown handler, and perform the action in the mouseup handler.

An example in ReactJS:

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

---

4.The best solution would be something like:

$('#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.
}

Unfortunately, $(document.activeElement) seems to always return the body element, not the one that was clicked. But maybe if there was a reliable way to know either 1. which element now has focus or two, which element caused the blur (not which element is blurring) from within the blur handler.

What you may be looking for is e.relatedTarget. So when clicking the link, e.relatedTarget should get populated with the link element, so in your blur handler, you can choose not to hide the container if the element clicked is within the container (or compare it directly with the 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 may not be supported in older browsers for blur events, but it appears to work in latest Chrome, Firefox, and Safari)

---

I know this is a later reply, but I had this same issue, and a lot of these solutions didn't really work in my scenario. mousedown is not functional with forms, it can cause the enter key functionality to change on the submit button. Instead, you can set a variable _mouseclick true in the mousedown, check it in the blur, and preventDefault() if it's true. Then, in the mouseup set the variable false. I did not see issues with this, unless someone can think of any.

참고URL : https://stackoverflow.com/questions/9335325/blur-event-stops-click-event-from-working