查找此处和此处提供的答案的解释。
简单地说,我有两个要素。带有onBlur事件的input和带有onClick事件的div。在没有任何特殊处理的情况下,当我通过单击div模糊输入时,onBlur事件会被触发,而onClick事件则不会。
然而,如果我在模糊事件处理程序中放入setTimeout,当我单击div时,两个事件处理程序都会被调用。为什么这样做?
HTML:
<input type="text" name="input" id="input1" />
<div id="div1">Focus the input above and then click me. (Will see 1 alert)</div>
<br/>
<input type="text" name="input" id="input2" />
<div id="div2">Focus the input above and then click me. (Will see 2 alerts)</div>
Javascript:
$(document).ready(function() {
function clickHandler() {
alert('Click!');
}
function blurHandler() {
alert('Blur!');
}
$('#input1').on('blur', function() {
blurHandler();
})
$('#input2').on('blur', function() {
window.setTimeout(blurHandler, 200);
})
$('#div1').on('click', function() {
clickHandler();
})
$('#div2').on('click', function() {
clickHandler();
})
});
Fiddle演示在这里。
发生这种情况是因为模糊事件发生在单击之前。alert()
方法停止脚本的执行,一旦停止,在您解除警报框后,单击事件将不会激发。在blur处理程序中使用setTimeout()
方法,实际上是允许触发click事件。
我建议您听mousedown而不是单击。按下鼠标按钮时,mousedown和blur事件相继发生,但单击仅在释放时发生。
这是因为alert()
的模态性质。尝试使用console.log()
,您会发现两者都会被调用。
setTimeout将在您定义的时间之后触发事件。。这样你就有更多的时间点击文本了。
另一方面,第一个输入没有时间触发模糊,因此更难触发点击事件,但如果你点击得足够快,即使第一个输入也会看到两个警报。