有人可以向我解釋爲什麼此事件觸發兩次？它似乎沒有在1.7之前的jQuery版本上做。jQuery事件觸發兩次

<input type="textbox" id="box" onblur="console.log('This will trigger twice!');"/> 
<script> 
$('#box').blur(); 
</script>

小提琴： http://jsfiddle.net/EWbmD/52/

來源

2014-02-10 SleepMachine

爲我觸發一次。你使用哪個瀏覽器？ –

我試過Chrome，IE11和Firefox。似乎都有問題。（請注意，控制檯傾向於對重複的消息進行「分組」，因此您可能在控制檯中只顯示一行，但在某處顯示「（2）」） – SleepMachine

是的，我知道，但仍然只有一次:) –

從內部看，觸發blur事件觸發blur和focusout事件內部調用onblur兩次。

的PoC

$('#box').on('blur focusout', function (e) { 
    console.log('this too', e.type); 
}); 
$('#box').blur();

演示：Fiddle

的blur事件是一個非冒泡事件，鼓泡對方是foucsout事件。所以在正常情況下，模糊操作會觸發這兩個事件。所以jQuery試圖變得聰明並且在發生模糊事件時觸發這兩個事件，但是看起來實現中存在一個錯誤。

來源

2014-02-10 08:42:51

有誰知道這是否是一個jQuery的bug，或者如果它是預期的行爲？如果有意的話，你將如何修改/修復我的代碼，並保持內聯「onBlur」？我不希望使用jQuery.on（）進行綁定。 – SleepMachine

@SleepMachine我不認爲這是縮進的行爲，因爲它假設調用'onblur'和'onfocusout'處理程序而不是調用'onblur'兩次 - http://jsfiddle.net/arunpjohny/SvqwF/4/ –

順便說一句，甚至沒有W3C規範。模糊：當事件目標失去焦點時，用戶代理必須調度此事件。 **必須從派發此事件**類型之前的元素中獲取焦點。此事件類型與focusout類似，但是在焦點移動**之後被分派**，並且不會冒泡。 http://www.w3.org/TR/DOM-Level-3-Events/#events-focusevent – loveNoHate

你只需要調用它一次：

$('#box').on('blur', function() { 
    console.log('This will trigger twice!'); 
}); 

$('#box').blur();

Updated Fiddle

或只是刪除您的jQuery代碼，並保持你的onblur事件中你input標記。

來源

2014-02-10 08:27:04 Felix

但問題是爲什麼要叫兩次 –

因爲他稱它兩次？一個是'onblur'，一個是通過jQuery觸發的？ – Felix

不..如果你在Chrome中打開小提琴，只是看到控制檯的消息記錄兩次 –

編輯：這可能是解決您的問題。

的jsfiddle基於focusout http://jsfiddle.net/SvqwF/7/

。

你觸發了兩次，因爲.blur()是觸發

.on('blur focusout', function(){}) (Thanks to @Arun P Johny)

剛剛觸發event listener您添加直列另外，如果你沒有傳遞函數.blur()。 JSFIDDLE

由於您添加了內聯函數，該函數被觸發兩次。

描述：綁定事件處理程序的「模糊」 JavaScript事件，或觸發元素上的事件。 jQuery .blur()

要獲取更多有關方法（舊IE .attachEvent）所涉及jQuery：

爲目標註冊多個事件偵聽器，調用addEventListener（）對同一目標但具有不同的事件類型或捕獲參數。MDN

注：我不能確定爲在.on()聲明哪些事件，好像所有的工作

的重點和模糊事件由W3C不起泡的規定，但jQuery的定義了跨瀏覽器的「focusin」和「focusout」事件。當使用「焦點」和「模糊」來附加委託事件處理程序時，jQuery將這些名稱映射爲「focusin」和「focusout」。 jQuery .on()

注2：blur() <- empty是trigger('blur')一個快捷方式。 JSFIDDLE

來源

2014-02-10 08:46:51 loveNoHate

jQuery事件觸發兩次

回答

的jsfiddle基於focusouthttp://jsfiddle.net/SvqwF/7/

相關問題

的jsfiddle基於focusout http://jsfiddle.net/SvqwF/7/