点击子元素时如何避免触发父子元素的双重点击事件？

嘿，这个问题太常见了！核心原因就是事件冒泡——浏览器会把点击事件从你实际触发的子元素，一路向上传递到它的父元素、甚至更上层的DOM节点，所以才会出现父子点击事件同时触发的情况。下面给你几个实用的解决思路：

方法一：使用stopPropagation()阻止事件冒泡 #

这是最直接的解决方案，在子元素的点击事件处理函数里，调用事件对象的stopPropagation()方法，就能阻止事件继续向上冒泡到父元素。

示例代码：

// 获取子图标元素
const childIcon = document.querySelector('.child-icon');
// 获取父元素
const parentElement = document.querySelector('.parent-element');

// 子元素点击事件
childIcon.addEventListener('click', function(e) {
  // 阻止事件向上冒泡
  e.stopPropagation();
  // 这里写子图标的点击逻辑
  console.log('子图标被点击啦');
});

// 父元素点击事件
parentElement.addEventListener('click', function() {
  // 这里写父元素的点击逻辑
  console.log('父元素被点击啦');
});

这样点击子图标时，只会触发子元素的事件，父元素的事件不会被触发。

方法二：通过事件源区分执行逻辑 #

如果你不想完全阻止事件冒泡（比如其他上层元素还需要响应这个点击事件），可以在父元素的事件处理函数里，判断实际点击的目标是不是子元素，如果是就跳过父元素的逻辑。

示例代码：

const parentElement = document.querySelector('.parent-element');
const childIcon = document.querySelector('.child-icon');

parentElement.addEventListener('click', function(e) {
  // e.target 是实际被点击的元素，检查它是不是子图标或其子元素
  if (e.target === childIcon || childIcon.contains(e.target)) {
    return; // 跳过父元素的逻辑
  }
  console.log('父元素被点击啦');
});

childIcon.addEventListener('click', function() {
  console.log('子图标被点击啦');
});

这里用e.target获取实际点击的元素，再判断它是不是子图标或者子图标的后代元素，是的话就不执行父元素的逻辑。

方法三：使用stopImmediatePropagation()（特殊场景） #

如果同一个元素绑定了多个点击事件，而你想阻止后续的事件触发，可以用stopImmediatePropagation()——它不仅阻止冒泡，还会阻止当前元素上的其他事件处理函数执行。不过这个方法用得比较少，只有特殊场景才需要。

示例代码：

childIcon.addEventListener('click', function(e) {
  e.stopImmediatePropagation();
  console.log('第一个子元素事件');
});

// 这个事件不会被触发
childIcon.addEventListener('click', function() {
  console.log('第二个子元素事件');
});

总结 #

大多数情况下，方法一就足够解决问题了，简单直接。如果有保留冒泡的需求，再考虑方法二。根据你的实际场景选就行～

内容的提问来源于stack exchange，提问作者An-droid