子节点和父节点都有多个事件监听器，阻止子节点事件冒泡，防止多次触发相同事件。

最新推荐文章于 2024-05-02 18:12:22 发布

翻车鱼fancy

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量110

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_31919419/article/details/131534120

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

例如父节点和子节点都绑定了相同的事件，点击子节点也会触发父节点事件，这时候只要在子节点的事件里面加入判断当前触发事件的真实dom元素event.target是否等于实际绑定事件的dom元素就可以避免点击子节点事件出现触发两次的情况。

<div id="parent">
  <button id="child1">Click me 1</button>
  <button id="child2">Click me 2</button>
</div>

const parentElement = document.querySelector("#parent");
const child1Element = document.querySelector("#child1");
const child2Element = document.querySelector("#child2");

child1Element.addEventListener("click", (event) => {
  if (event.target === child1Element) {
    console.log("Clicked child1 element");
    event.stopPropagation(); // 阻止事件冒泡
  }
});

child2Element.addEventListener("click", (event) => {
  console.log("Clicked child2 element");
});

parentElement.addEventListener("click", () => {
  console.log("Clicked parent element");
});