Javascript 为什么在模糊事件处理程序中添加setTimeout会修复；掩蔽；另一个点击处理程序？

寻找对所提供答案的解释，以及

简单地说，我有两个要素。带有onBlur事件的输入和带有onClick事件的div。在没有任何特殊处理的情况下，当我通过单击div模糊输入时，onBlur事件被激发，而onClick事件则不被激发

但是，如果我在blur事件处理程序中设置了setTimeout，那么当我单击div时，两个事件处理程序都会被调用。为什么这样做

HTML:

---

Fiddle演示是。

这是因为

alert（）

的模态特性。尝试改用

console.log（）

，您将看到两者都将被调用。

设置超时将在您定义的时间之后触发事件。。这样你就有更多的时间点击文本了

---

另一方面，第一次输入没有时间触发模糊，因此触发单击事件更加困难，但如果单击速度足够快，即使是第一次输入，也会看到两个警报。

这是因为模糊事件发生在单击之前。

alert（）

方法停止脚本的执行，一旦停止，单击事件将不会在您关闭警报框后触发。在模糊处理程序中使用

setTimeout（）

方法，实际上是允许触发单击事件

---

我建议你听鼠标向下而不是单击。当您按下鼠标按钮时，mousedown和blur事件会一个接一个地发生，但单击只会在您松开鼠标按钮时发生。

我想，对于本例和其他示例，答案都与事件处理程序的具体操作细节有关。请注意，如果将

alert

替换为

console.log

，则两个元素都会产生两种反应。这意味着这是警报，而不是模糊/点击组合。请注意，在不释放鼠标按钮的情况下点击底部框几秒钟（确切地说是200毫秒）可能是有教育意义的）防止第二个事件被触发。我真的不明白为什么有人会说如果我的答案解释了发生了什么事情，那么它就没用了。

mousedown

的缺点是单击一开始就立即触发。在大多数情况下，点击并犹豫的用户将无法返回他们的点击决定。

<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>

$(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();
  })
});