js阻止事件冒泡和捕获事件

最新推荐文章于 2024-04-01 13:33:38 发布

秃头的男人

最新推荐文章于 2024-04-01 13:33:38 发布

阅读量3.8k

点赞数 2

分类专栏： javaScript 文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_62173626/article/details/125751270

版权

javaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.冒泡事件

点击子级元素节点触发事件，也会触发父级的事件就是事件冒泡

如何阻止事件冒泡：

在相应的节点事件函数内使用：event.stopPropagation()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #box {
      display: flex;
      width: 800px;
      height: 800px;
      background: red;
    }
    #box1 {
      margin: auto;
      width: 500px;
      height: 500px;
      background: green;
      display: flex;
    }
    #box2 {
      margin: auto;
      width: 300px;
      height: 300px;
      background: pink;
    }
  </style>
  <body>
    <div id="box" onclick="fun0()">
      <div id="box1" onclick="fun1()">
        <div id="box2" onclick="fun2()"></div>
      </div>
    </div>
  </body>
  <script>
    function fun0() {
      console.log('我是红色div')
    }
    function fun1() {
      event.stopPropagation()
      console.log('我是绿色div')
    }
    function fun2() {
      event.stopPropagation()
      console.log('我是粉色div')
    }
  </script>
</html>

2.捕获事件

事件触发顺序是从外到内

 var box2 = document.getElementById('box2')
 //obj.addEventListener("事件名",函数名,事件流 true/false)
 //true:捕获，false：默认值代表冒泡
 box2.addEventListener('click', fun, true) 

//移除事件
box2.removeEventListener('click',fun,true)