3

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

我像这样设置事件处理程序（使用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，我怎么能做我想做的事？如果没有其他办法，那么这将不得不做，但这似乎是一种有缺陷的方法。

4

1 回答 1

0

您可以通过分配全局 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。我还建议阅读：如何检查鼠标是否在 jQuery 中的元素上？. 我想这对你会有用。

于 2012-08-25T11:12:04.997 回答