模糊事件阻止點擊事件工作？

Question

似乎 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的行為是違反直覺的，特別是因為您無法通過在釋放按鈕之前將鼠標移離元素來取消單擊。

我還能想到幾個。

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)似乎總是返回 body 元素，而不是被點擊的那個。 但也許如果有一種可靠的方法可以從模糊處理程序中知道 1. 哪個元素現在具有焦點或兩個焦點，哪個元素導致了模糊（而不是哪個元素正在模糊）。 另外，是否還有其他事件（除了mousedown ）在模糊之前觸發？

Answer 1

click事件在blur后觸發，因此鏈接被隱藏。 而不是click使用mousedown它會起作用。

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

另一種選擇是在隱藏blur事件的鏈接之前有一些延遲。 由您決定采用哪種方法。

演示

Answer 2

您可以嘗試使用mousedown事件而不是click 。

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

這顯然不是最好的解決方案，因為對於用戶來說， mousedown事件的實現方式與click事件的實現方式不同。 不幸的是， blur事件也會取消mouseup事件。

Answer 3

執行應該在click mousedown發生的操作是糟糕的用戶體驗。 相反， click有效地由什么組成？ 一個mousedown和一個mouseup 。

因此，在mousedown處理程序中停止mousedown事件的傳播，並在mouseup處理程序中執行操作。

ReactJS 中的一個例子：

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

Answer 4

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. 哪個元素現在具有焦點或兩個焦點，哪個元素導致了模糊（而不是哪個元素正在模糊）。

您可能正在尋找的是e.relatedTarget 。 因此，當單擊鏈接時， 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.
   }
}

（對於blur事件，舊瀏覽器可能不支持relatedTarget ，但它似乎適用於最新的 Chrome、Firefox 和 Safari）

Answer 5

如果this.menuTarget.classList.add("hidden")是隱藏可點擊菜單的模糊行為，那么我在調用它之前等待 100 毫秒就成功了。

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

這允許在menuTarget DOM 隱藏之前處理單擊事件。

Answer 6

我知道這是后來的回復，但我遇到了同樣的問題，而且很多這些解決方案在我的場景中並沒有真正起作用。 mousedown對表單不起作用，它可能導致提交按鈕上的輸入鍵功能發生變化。 相反，您可以在mousedown設置一個變量_mouseclick true ，在blur檢查它，如果為 true 則preventDefault() 。 然后，在mouseup設置變量 false。 我沒有看到這方面的問題，除非有人能想到任何問題。

Answer 7

我在使用 jQuery 模糊、單擊處理程序時遇到了類似的問題，其中我有一個輸入名稱字段和一個保存按鈕。 使用模糊事件將名稱填充到標題占位符中。 但是，當我們在輸入名稱后立即單擊保存時，只會觸發模糊事件，而忽略保存 btn 單擊事件。

我使用的技巧是利用我們從模糊事件中獲得的事件對象並檢查 event.relatedTarget。

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 注冊了一個單擊事件，該函數調用了一個函數，當模糊事件的相關目標是 Save 按鈕以補償未觸發的單擊事件時，也會調用該函數。 注意：在使用原生 onclick 和 onblur 處理程序時沒有注意到這個問題 - 在 html 中測試。