点击蓝色box会触发红色root事件和蓝色box事件
2023-08-18T14:54:53.png

添加e.stopPropagation();后只会触发蓝色box事件

2023-08-18T14:54:13.png

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>


.root{

  width:500px;
  height:500px;
  background-color:red;
}

.box{

  width:200px;
  height:200px;
  background-color:blue;

}


  </style>

</head>
<body>
  
  



<div class="root" id="root">

<div class="box" id="box"></div>

</div>






<script>

var root = document.getElementById("root");
var box = document.getElementById("box");



root.onclick = function root(){
console.log("点击了root");
};



box.onclick = function box(e){
  e.stopPropagation();
  console.log("点击了box");
};





</script>






</body>
</html>