javascript - 如何编写智能 onblur 事件

Question

让我们假设我们有这个示例代码:

<input type="text" onblur="blurHandler()" />
<div class="results">
    <ul>
        <li><a href="#" onclick="clickHandler(this);">sampleText</a></li>
    </ul>
</div>

假设您当前关注输入标签，并将鼠标悬停在“a”标签上并单击它。浏览器将首先处理 onblur 事件。

模糊事件的任务是隐藏结果 div，但您仍然希望能够在此之前单击结果 div 中的链接。

Answer 1

• 在blurHandler中，使用setTimeout()延迟隐藏您的 div。

  function blurHandler() {
      setTimeout(function () {
          //close the div
      }, 100);
      //do whatever else needs to be done
  }
  

  jsFiddle Demo

• 另一种选择是使用链接上的 mouseenter/mouseleave 事件，并在事件处理程序之间使用公共(public)标志，以便它们了解彼此。

• 还有一件事:您可以用短动画隐藏 div，因此当单击发生时它实际上仍然存在。像这样的事情:

   $('.results').hide(1000);
  

  jsFiddle Demo

<小时/>

注意:您应该查看 advanced event handling ，内联事件处理程序确实会很快弄乱您的 HTML。关注点分离有助于他人和 future 的自己。如果您使用 jQuery(查看问题下的标签)，您应该使用 jQuery 的事件处理方法，该方法已经使用了高级模型。