简单地说,我有两个要素。一个带有onBlur事件的输入,一个带有一个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();
})
});
小提琴演示是这里。
发布于 2016-04-15 11:45:16
发生这种情况是因为模糊事件发生在单击之前。alert()
方法停止脚本的执行,一旦停止,单击事件将在取消警报框后不触发。在模糊处理程序中使用setTimeout()
方法,实际上允许触发单击事件。
我建议你听鼠标向下而不是点击。当你按下鼠标按钮时,鼠标向下的和模糊的事件就会一个接一个地发生,但只有当你释放它时才会点击。
发布于 2016-04-15 11:34:46
这是因为alert()
的模态特性。尝试使用console.log()
,您将看到两者都会被调用。
发布于 2016-04-15 11:36:26
在您定义.之后,setTimeout将触发事件。所以你会有更多的时间点击文本。
另一方面,第一个输入没有时间触发模糊,因此更难触发单击事件,但是如果单击足够快,即使是第一个输入,也会看到两个警报。
https://stackoverflow.com/questions/36655407
复制相似问题