如何在另一个元素使用 jQuery 模糊后检查焦点是否切换到新元素？答案

【问题标题】：How do I check if focus has switched to a new element after another has blurred using jQuery?如何在另一个元素使用 jQuery 模糊后检查焦点是否切换到新元素？
【发布时间】：2012-08-20 17:26:03
【问题描述】：

我的页面上有一个文本输入。当它获得焦点时，其下方会出现一个选择框。当它失去焦点时，我希望选择框消失除非焦点已转移到选择框。听起来很简单，但我遇到了一个问题。

我像这样设置事件处理程序（使用咖啡脚本）

jQuery ->
  $('td.description input').focus -> showItemSelector()
  $('td.description input').blur -> hideItemSelector()

showItemSelector() 和 hideItemSelector() 是这样定义的

showItemSelector () ->
  $('#item-selector').show()

hideItemSelector () ->
  unless $('#item-selector select').is(':focus')
    $('#item-selector').hide()

但它不起作用。输入失去焦点后，项目选择器始终隐藏。我做了一些实验，我的怀疑得到了证实。 hideItemSelector 函数在焦点转移到新元素之前执行（这是有道理的——浏览器可能会从第一个元素获取焦点，触发我的函数，然后再将焦点分配给下一个元素）。下面这段代码演示了这一点；

hideItemSelector = () ->
    focus = -> console.log $('select#category').is(':focus')
    focus()
    setTimeout focus, 1000

这会在控制台中返回 false，然后返回 true。延迟让浏览器有时间转移焦点。

所以我的问题是，我怎样才能在不使用 setTimeout 的情况下做我想做的事？如果没有其他办法，那么就必须这样做，但这似乎是一种有缺陷的方法。

【问题讨论】：

我不会真的称setTimeout 是一种有缺陷的方法。有时使用它是不可避免的。

标签： jquery browser focus coffeescript

【解决方案1】：

您可以通过分配全局 var 并将其值从 true 更改为 false 来实现这一点，例如：

$('#yourElement').mouseenter(function() {
  isHovered = true;
}).mouseleave(function() {
   isHovered = false;
 });

还有一种方法适用于除 Internet Explorer 以外的所有浏览器，但我不建议使用它，因为它使用了无效的伪选择器：

if ($('#hello').is(':hover')) {
      alert('hello');
 }

除此之外，您还必须为此找到插件。这是SpYk3HH 的自制插件，可以在这里找到：jsFiddle isHover Plugin Demo。我还建议阅读：How do I check if the mouse is over an element in jQuery?。我认为它对你有用。

【讨论】：