블러 이벤트가 클릭 이벤트 작동을 멈추나요?

블러 이벤트가 클릭 이벤트 작동을 멈추나요?

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.하기 3. 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)클릭한 요소가 아니라 항상 본문 요소를 반환하는 것 같습니다.그러나 이제 어떤 요소에 초점이 있는지, 어떤 요소가 두 개인지, 어떤 요소가 블러 핸들러 내에서 블러를 유발하는지(어느 요소가 블러링하고 있는지가 아님) 알 수 있는 신뢰할 수 있는 방법이 있다면 좋을 것입니다.는요? 이외에 종목이 ?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');
});

은 의 이 이 의 은 mousedown는게과로다지a다지로ertnsdytere는게은click는. 불행하게도.blur됩니다를 합니다.mouseup사건들도 마찬가지입니다.

에 해야 에 해야 clickmousedown나쁜 UX입니다.에는 요,가.click실질적으로 구성되어 있습니까?mousedown그리고.mouseup.

, 를 를 중지합니다.mousedown의 mousedown 그리고 합니다.mouseup

반응의 예제JS:

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

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는 클릭한 본문 요소가 아닌 본문 요소를 항상 반환하는 것 같습니다.그러나 이제 어떤 요소에 초점이 있는지, 어떤 요소가 두 개인지, 어떤 요소가 블러 핸들러 내에서 블러를 유발하는지(어느 요소가 블러링하고 있는지가 아님) 알 수 있는 신뢰할 수 있는 방법이 있다면 좋을 것입니다.

당신이 찾고 있는 것은 e.related Target입니다.그래서 링크를 클릭할 때,e.relatedTarget링크 요소로 채워야 하므로 블러 처리기에서 클릭한 요소가 컨테이너 내에 있으면 컨테이너를 숨기지 않도록 선택하거나 링크와 직접 비교할 수 있습니다.

$('#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서을수다지다r수에는 이전 브라우저에서 지원되지 않을 수 있습니다.blur Chrome,트,나 Chrome, Firefox및 Safari는남으로 )

한다면this.menuTarget.classList.add("hidden")클릭 가능한 메뉴를 숨기는 블러 동작입니다. 그리고 나서 100ms를 기다렸다가 실행에 성공했습니다.

setTimeout(() => {
  this.menuTarget.classList.add()
}, 100)

는 를 가 할 를 할 menuTarget숨겨지기 전의 DOM.

이것이 나중의 답변이라는 것을 알고 있지만, 저는 이와 같은 문제가 있었고, 이러한 많은 해결책이 제 시나리오에서는 실제로 작동하지 않았습니다.mousedown양식으로는 작동하지 않으며, 제출 버튼에서 키 입력 기능이 변경될 수 있습니다.신를수다할a을 설정할 수 ._mouseclick한에 mousedown, 에서 합니다.blur,그리고.preventDefault()사실이라면그다음에.mouseup변수를 false로 설정합니다.나는 누군가가 생각할 수 없는 한, 이것에 대한 문제를 보지 못했습니다.

jQuery blur를 사용하는 동안 비슷한 문제가 발생했습니다. 입력된 이름 필드와 저장 버튼이 있는 핸들러를 클릭합니다.제목 자리 표시자에 이름을 채우기 위해 블러 이벤트를 사용했습니다.하지만 이름을 입력한 직후 저장을 클릭하면 블러 이벤트만 발생하고 저장 btn 클릭 이벤트는 무시됩니다.

제가 사용한 해킹은 블러 이벤트에서 얻은 이벤트 객체를 탭하여 이벤트 관련 대상을 확인하는 것이었습니다.

PFB 내게 효과가 있었던 코드:

$("#inputName").blur(function (event) {
        title = event.target.value;
        //since blur stops an immediate click event from firing - Firing click event here
        if (event.relatedTarget ? event.relatedTarget.id == "btnSave" : false) {
            saveBtn();
        }
    });

$("#btnSave").click(SaveBtn)

이 스레드에서 이미 설명한 바와 같이 동시에 실행 시 블러 이벤트 차단 클릭 이벤트로 인한 것입니다.그래서 나는 Save Btn에 등록된 클릭 이벤트를 가지고 있는데, 이것은 클릭 이벤트가 발화하지 않는 것을 보상하기 위해 블러 이벤트의 관련 Target이 Save 버튼일 때도 호출됩니다.참고: 네이티브 온클릭 및 온블러 핸들러를 사용하는 동안 이 문제를 인지하지 못했습니다. html에서 테스트되었습니다.

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