Question

我一直在阅读以下内容：

How do I detect a click outside an element?

我想以正确和安全的方式实现这一点。

我想在我点击div container之外的那个console.log来触发时。每当我点击里面的或上的<{1}}类的div，就不会触发它。

现在。我可以自己解决这个问题，但感觉有可能是一个聪明的解决方案，无论容器div中有多少元素，甚至嵌套它可能会变成这样做。

当我点击容器div内的其中一个元素（即按钮）时，单击实际div与类container，但不时，下面的代码适用

JS：

container

HTML：

document.addEventListener('click', function (event.target) { if(document.getElementsByClassName('container')[0] !== event.target){ console.log('clicking outside the div'); } });

对此必须有一个良好的做法，以下评分最高的答案{{3}}在寻找其他问题的答案时吓坏了我，我宁愿要求一个合适的答案。

请不要<div class="container"> <div> <button> I will be clicking here! </button> <div> </div>！

Answer 1

你的方法正确，只需要在代码中进行一点改动。而不是只检查event.target是否与div相同，还要检查div是否包含事件目标：

var container = document.getElementsByClassName('container')[0];
document.addEventListener('click', function( event ) {
  if (container !== event.target && !container.contains(event.target)) {    
    console.log('clicking outside the div');
  }
});

如果由于某种原因不支持HTMLnode.contains（）（safari，我正在看你），你可以使用以下代码片段来检查一个元素是否包含另一个元素：

function childOf( node, ancestor ) {
    var child = node;
    while (child !== null) {
        if (child === ancestor) return true;
        child = child.parentNode;
    }
    return false;   
}

Answer 2

另一个解决方案可以是第二个元素。它位于下拉菜单的下方，但是经过视口并具有单击处理程序，从而关闭了下拉菜单。此元素的存在（CSS：display，Vue：v-if ...）应链接到下拉列表。

这具有（缺点）优点，即单击外部不会在您单击的元素上注册，因此这是此方法的决定因素。具有背景色和更高的不透明度，可用于弹出窗口。

CSS：

.dropdown {
  ...
  z-index: 2;
}
.overlay {
  display:none;
  position: fixed;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}
.overlay.open {
  display:block;
}

Answer 3

点击后即可获得点击次数。在文档上，您需要检测点击的元素（event.target）是否在您的.container div中，如下所示：

＆＃13;

$(document).on('click', function (event) {
  if ($(event.target).closest('.container').length == 0) {
    console.log('just clicked outside your .container div');
  }
});

＆＃13;

.container {
  padding: 50px;
  background-color: pink;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div>
    <button>
      I will be clicking here!
    </button>
  <div>
</div>

＆＃13;

检测特定div及其所有子项之外的点击次数

3 个答案: