Question

寻找对here和here提供的答案的解释。

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

但是，如果我将一个setTimeout放在blur事件处理程序中，当我单击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();
  })
});

小提琴演示是here。

Answer 1

这是因为模糊事件发生在点击之前。 alert()方法停止执行脚本，一旦停止，解除警报框后单击事件将不会触发。使用 blur 处理程序中的setTimeout()方法，实际上是允许触发 click 事件。

我很高兴听你 mousedown 而不是点击。当您按下鼠标按钮时， mousedown 和 blur 事件会一个接一个地发生，但单击仅在您释放时发生。

Answer 2

这是因为alert()的模态性质。请尝试使用console.log()，然后您会看到两者都会被调用。

Answer 3

setTimeout将在你定义的时间之后触发事件..所以你将有更多的时间点击文本。

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

为什么在blur事件处理程序中添加setTimeout会修复另一个单击处理程序的“屏蔽”？

3 个答案: