事件冒泡，阻止事件冒泡

最新推荐文章于 2024-09-11 11:02:35 发布

wuyan_xingchen

最新推荐文章于 2024-09-11 11:02:35 发布

阅读量351

点赞数

文章标签： js css html

本文链接：https://blog.csdn.net/wuyan_xingchen/article/details/106584347

版权

什么是事件冒泡，怎么阻止事件冒泡

冒泡

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="demo" style="width: 300px; height: 300px; background: blue;">
      <div id="demo1" style="width: 200px; height: 200px; background: red;">
        <div id="demo2"style="width: 100px; height: 100px; background: yellow;">
          333
        </div>
        222
      </div>
      111
    </div>
    <script>
      let demo = document.querySelector("#demo");
      let demo1 = document.querySelector("#demo1");
      let demo2 = document.querySelector("#demo2");
      demo.onclick = (e) => {
        console.log(111);
      };
      demo1.onclick = (e) => {
        console.log(222);
      };
      demo2.onclick = (e) => {
        console.log(333);
      };
    </script>
  </body>
</html>

冒泡效果
在这里插入图片描述当点击黄色块时触发绑定的点击事件应该只打印333，但是它连同两个父级的点击事件也触发了打印除333 222 111，这就是冒泡。冒泡是从里往外触发的

接下来如果你点击红色块那么则会打印除222 111。

那怎么阻止它冒泡呢？

阻止事件冒泡

    <script>
      let demo = document.querySelector("#demo");
      let demo1 = document.querySelector("#demo1");
      let demo2 = document.querySelector("#demo2");
      demo.onclick = (e) => {
        console.log(111);
      };
      demo1.onclick = (e) => {
        e.stopPropagation();//阻止事件冒泡
        console.log(222);
      };
      demo2.onclick = (e) => {
        e.stopPropagation();
        console.log(333);
      };
    </script>