事件冒泡，阻止事件冒泡

最新推荐文章于 2023-07-13 11:46:30 发布

wuyan_xingchen

最新推荐文章于 2023-07-13 11:46:30 发布

阅读量293

点赞数

文章标签： 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>

这个时候无论你点击哪一个都只会打印此元素绑定的事件

注意

假如你只在中间红色块上阻止冒泡，当你点击黄色块的他会打印出333 222，不会再往外层继续触发。但是当你点击红色块时它还是会继续冒泡打印出222 111，即只能阻止目标元素的事件冒泡到父级元素。

wuyan_xingchen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
事件冒泡，阻止事件冒泡

什么是事件冒泡，怎么阻止事件冒泡冒泡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&g
复制链接

扫一扫