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

Question

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

我像这样设置了事件处理程序(使用 CoffeeScript )

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 的情况下做我想做的事情？如果没有其他办法，那么就必须这样做，但这似乎是一个有缺陷的方法。

Answer 1

您可以通过分配全局变量并在用户移入和移出对象时将其值从 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? 。我认为这对你有用。