检测元素外部(或内部)的点击 - JavaScript

在 JavaScript 中，我们经常需要检测用户是否点击了某个元素的外部或内部。这个功能可以用来关闭某个弹窗、下拉列表等等。在本文中，我们将介绍如何使用 JavaScript 实现这个功能。

监听全局点击事件

我们可以全局监听点击事件，然后通过判断点击的元素是否为目标元素的子元素来判断是否点击了目标元素的外部。这个方法需要使用事件委托，代码如下：

document.addEventListener('click', function (event) {
  var targetElement = event.target;
  var targetParent = targetElement.parentNode;

  if (!targetParent || targetParent && !targetParent.contains(targetElement)) {
    // 点击了目标元素的外部
  }
});

这里我们使用了 event.target 获取点击的目标元素，然后使用 targetElement.parentNode 获取目标元素的父元素，最后使用 targetParent.contains(targetElement) 判断点击的元素是否为目标元素的子元素。

监听目标元素内点击事件

我们可以为目标元素添加点击事件监听器，然后使用 event.stopPropagation() 阻止事件冒泡，从而只触发目标元素的点击事件而不会触发全局的点击事件。代码如下：

var targetElement = document.getElementById('target-element');
targetElement.addEventListener('click', function (event) {
  event.stopPropagation();
  // 点击了目标元素内部
});

这里我们使用了 document.getElementById(...) 获取目标元素，然后使用 targetElement.addEventListener(...) 在目标元素上添加点击事件监听器，最后使用 event.stopPropagation() 阻止事件冒泡。

结论

在本文中，我们介绍了如何使用 JavaScript 实现检测元素外部或内部的点击事件。我们可以全局监听点击事件，然后通过判断点击的元素是否为目标元素的子元素来判断是否点击了目标元素的外部，或者直接为目标元素添加点击事件监听器阻止事件冒泡，从而只触发目标元素的点击事件而不会触发全局的点击事件。