检测特定 div 及其所有子级之外的点击

我一直在阅读以下内容：

https://css-tricks.com/dangers-stopping-event-propagation/

我想以适当且安全的方式实施这一点。

我想当我点击 div 之外的类时container那console.log是要触发。每当我点击inside or ondiv 与类container以免其触发。

现在。我可以自己修复这个问题，但是感觉可能有一个聪明的解决方案能够做到这一点，无论容器 div 内有多少元素，甚至它的嵌套程度如何。

当我点击类中的实际 div 时，下面的代码适用container, but not当我单击容器 div 内的某个元素（即按钮）时。

js:

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

html:

<div class="container">
  <div>
    <button>
      I will be clicking here!
    </button>
  <div>
</div>

必须有一个良好的实践方法，以下是最受好评的答案如何检测元素外部的点击？在寻找其他问题的答案时让我感到害怕，我宁愿要求一个正确的答案。

请不要使用 jQuery！

您的方法是正确的，只需要在代码中进行一点点更改。 不仅检查 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;   
}