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)

 

# javascript # css # html
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

COC云运维中心新特性解读，让智能运维更高效

avatar 华为开发者空间
cover

简单几步，基于云主机快速为Web项目添加AI助手

avatar 华为开发者空间
cover

GaussDB性能调优

avatar 华为开发者空间