有人可以向我解释为什么此事件触发两次？它似乎没有在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/