<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width: 300px; height: 300px; background-color: red; } #box2 { width: 200px; height: 200px; background-color: green; } #box3 { width: 100px; height: 100px; background-color: blue; } </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 array = [box1, box2, box3]; for (var i = 0; i < array.length; i++) { var box = array[i]; box.onclick = function (e) { console.log(this.id); // Propagation 传播 // 停止事件传播 取消冒泡 // 标准的DOM方法 // e.stopPropagation(); // 取消冒泡 非标准的方式 老版本的IE支持 e.cancelBubble = true; } } </script> </body> </html>