javascript - 单击时停止元素消失

Question

我正在编写一个简单的 jQuery 插件，它会在文本框获得焦点时动态地将一个 div 放置在该文本框下方。我已经能够在所有浏览器中获得正确的位置。

我还必须在文本框的 focus 和 blur 事件上附加两个事件处理程序。它工作正常，但问题是即使我们单击它，放置在文本框下方的 div 也会关闭。现在它为什么会这样发生是有道理的，这是因为文本框失去了焦点，但有什么办法可以阻止它发生吗？

我尝试将其附加到模糊事件处理程序 -

if($(mainElem).is(":focus")) return;

其中 mainElem 是显示在文本框下方的 div。

这是一个jsFiddle to illustrate问题。

Answer 1

如果您想在显示的 div 中放置“可点击”元素，您将无法使用 blur 事件。解决此问题的一种方法是将您的事件监听器绑定(bind)到更全局的元素，例如 document，然后过滤掉目标。

这是一个代码示例:

$(document).on('click', function (e) {
      var targetEl = e.target,
          parent = $(e.target).parents()[0];
      if (relElem[0] === targetEl || self[0] === targetEl || self[0] === parent) {
          $(mainElem).show();
      } else {
          $(mainElem).hide();
      }
 });

这是对您的 fiddle 的更新:http://jsfiddle.net/9YHKW/6/