jquery - 整个 div 和子项的 jQuery focusout

Question

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

但是，现在我在 div 的包装器上有 focusout 事件，当我单击 div 内的按钮时，包装器失去对孩子的关注，我的事件被触发。检查单击的元素是否是我可以做的包装器的子元素，但由于包装器不再具有焦点，我的事件将不会再次触发以删除 div。

我也尝试过.blur，但这并没有更好的效果。

做这个的最好方式是什么？

Answer 1

使用纯 javascript 解决此问题的一种方法是使用relatedTargetevent 参数中的给定：

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

Answer 2

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

$(this)=您要关注的div。

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

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

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');
  }
});