阻止事件冒泡 · JavaScript

## 阻止事件冒泡 ``` <style> #box1 { width: 300px; height: 300px; background-color: pink; } #box2 { width: 200px; height: 200px; background-color: black; } #box3 { width: 100px; height: 100px; background-color: skyblue; } </style> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"></div> </div> </div> <script> var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); var box3 = document.getElementById('box3'); var arr = [box1, box2, box3]; for (let i = 0; i < arr.length; i++) { var box = arr[i]; box.onclick = function (e) { console.log(this.id); e.stopPropagation(); //停止事件传播,取消冒泡 //老版本的IE浏览器,非标准的方式,chrome也支持 e.cancelBubble = true; } } </script> ```