为什么在模糊事件处理程序中添加setTimeout会修复“;掩蔽”;另一个单击处理程序的

Why does adding a setTimeout inside a blur event handler fix the "masking" of another click handler?

本文关键字：程序 掩蔽 另一个 单击 处理 事件处理 模糊 添加 setTimeout 为什么      更新时间：2023-09-26

查找此处和此处提供的答案的解释。

简单地说，我有两个要素。带有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将在您定义的时间之后触发事件。。这样你就有更多的时间点击文本了。

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

相关文章：