如何在JavaScript中监听元素外的点击事件？

在元素上添加事件监听器很简单，只需使用EventTarget.addEventListener()方法即可。然而，在某些情况下，您可能希望监听特定元素外的点击事件。虽然没有直接的方法可以实现这一点，但只需要一点巧思。

事件监听器不一定需要附加到您要监听的元素上。您可以将它们附加到任何您想要的元素上，只要您可以检查事件目标是否与您要查找的目标匹配即可。这被称为事件委托。

使用事件委托，您可以将事件监听器委托给父元素。然后，您可以使用Event.target和Node.contains()来检查事件目标是否与您要查找的目标匹配。如果不匹配，您可以运行回调函数。

const onClickOutside = (element, callback) => {
  document.addEventListener('click', e => {
    if (!element.contains(e.target)) callback();
  });
};

onClickOutside('#my-element', () => console.log('Hello'));
// 每当用户在#my-element之外点击时，将记录'Hello'