Question

我有一个div，我通过jQuery动态创建，其中包含一些链接/按钮。当这个div失去焦点时，我需要删除它。这部分我可以做好。

但是，现在我在div的包装器上有一个focusout事件，当我点击div中的一个按钮时，包装器会失去焦点给孩子并且我的事件被触发了。检查单击的元素是否是我可以执行的包装器的子项，但由于包装器不再具有焦点，因此我的事件不会再次触发以删除div。

我也试过.blur，但这不会更好。

这样做的最佳方式是什么？

Answer 1

$("#yourDiv").focusout(function () {
   if ($(this).has(document.activeElement).length == 0) {
       // remove div
   }
});

$(this) =您正在关注的div。

document.activeElement =当前焦点的元素。

$(this).has(document.activeElement)只是检查活动元素是否是div的子元素

Answer 2

使用普通javascript解决此问题的一种方法是使用event参数中给出的relatedTarget：

element.addEventListener('focusout', function(event) {
    if (element.contains(event.relatedTarget)) {
        // don't react to this
        return;
    }
    // do something
});

Answer 3

这是我使用 event.relatedTarget 为菜单解决此问题的方法：

$('#mapmenu  a.nolink').click(function (e) {//ul.lev-0 > li.expanded >
  $(this).closest('li').toggleClass('hovered');
  e.preventDefault();
  e.stopPropagation();
  return false;
});
$('#mapmenu  a.nolink').closest('li').focusout(function (e) {
  var ax = e.relatedTarget;
  var bx = $(ax).closest('ul');
  if ($(this).has(bx).length == 0) {
    $(this).removeClass('hovered');
  }
});

整个div和孩子的jQuery焦点

3 个答案: