javascript - jquery - 如果字段有焦点则执行事件

Question

我正在尝试:

1-将鼠标悬停在 Div1 上时，会出现 Div2。
2-Div 2 有一个文本字段。
3-当文本字段具有焦点时，即使悬停已关闭 Div1/Div2，Div2 仍保持打开状态。
4-单击除 Div2 之外的任何内容都会隐藏 Div2

http://jsfiddle.net/7FGK8/

<div id="one"></div>
<div id="two">
  <input type="text" id="text">
</div>

   $(document).ready(function() {
    if(!$('#text').is(":focus")) {
    $('#one, #two').hover(function() {
      $('#two').toggleClass('k k_b');
    });
  };
});

div2 没有在焦点上保持打开状态，我认为我的处理方式不正确。
对我来说，代码是这样说的:
“如果#text 没有焦点，请执行此操作。如果#text 具有焦点，则不要执行此操作。”

div2 在悬停时隐藏。一旦它获得焦点，隐藏它的唯一方法就是点击关闭。我也不确定事件委托(delegate)将如何在这里发挥作用。有人有什么建议吗？我正在考虑使用 onblur 来隐藏(或删除新类)。

Answer 1

首先，您应该使用 opacity: 0 或 display: none 隐藏元素，这也允许您正确地为它们设置动画。

问题在于执行的顺序以及处理程序(如 .hover)的存储顺序。你写了:“加载文档时，如果 #text 没有焦点，请记住始终在悬停时切换 k 和 k_b”

所以基本上你总是附加悬停处理程序。

这是一个更复杂但有效的解决方案，请参阅 fiddle 以了解轻微的 css 和 html 更改:

$(document).ready(function() {
    $('#wrapper').hover(function() {
        $('#two').fadeIn(200);
    }, function() {
        if ( !$('#text').is(":focus") )
            $('#two').fadeOut(200);
    });
    $('#two').on("blur", "input", function() {
        if ( !$('#one').is(":hover") )
            $('#two').fadeOut(200);
    });
});

还有 fiddle :http://jsfiddle.net/7FGK8/1/