javascript - 检测点击外部元素(vanilla JavaScript)

Question

我到处寻找好的解决方案，但找不到不使用 jQuery 的解决方案。

是否有一种跨浏览器的正常方式(没有奇怪的黑客攻击或容易破解的代码)来检测元素外部的点击(可能有也可能没有子元素)？

Answer 1

将事件监听器添加到文档 并使用Node.contains()查找事件的目标(最里面被点击的元素)是否在您指定的元素内。它甚至可以在 IE5 中运行

const specifiedElement = document.getElementById('a')

// I'm using "click" but it works with any event
document.addEventListener('click', event => {
  const isClickInside = specifiedElement.contains(event.target)

  if (!isClickInside) {
    // The click was OUTSIDE the specifiedElement, do something
  }
})

var specifiedElement = document.getElementById('a');

//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);
  if (isClickInside) {
    alert('You clicked inside A')
  } else {
    alert('You clicked outside A')
  }
});

div {
  margin: auto;
  padding: 1em;
  max-width: 6em;
  background: rgba(0, 0, 0, .2);
  text-align: center;
}

Is the click inside A or outside?
<div id="a">A
  <div id="b">B
    <div id="c">C</div>
  </div>
</div>