如何阻止事件的冒泡行为 · js技术点

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1{ width: 300px; height: 200px; background-color: red; } #div2{ width: 250px; height: 150px; background-color: green; } #div3{ width: 200px; height: 100px; background-color: blue; } div:hover { cursor: pointer; } pre { font-size: 14px; font-weight: 700; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> <pre> 如果不阻止冒泡行为，点击蓝色的标签会按照：蓝色->绿色->红色触发它们的相应事件。阻止事件的冒泡行为有两种方法： 1. 在函数内部使用：window.event.cancelBubble=true; IE特有，谷歌支持，火狐不支持。因为window.event对象是IE特有的。 2. 在函数内部使用：e.stopPropagation(); 谷歌和火狐支持，IE不支持。因为e对象是谷歌和火狐特有的，而IE没有。 </pre> <script type="text/javascript"> document.getElementById("div1").onclick = function(e) { console.log("div1"); // window.event.cancelBubble = true; e.stopPropagation(); } document.getElementById("div2").onclick = function(e) { console.log("div2"); // window.event.cancelBubble = true; e.stopPropagation(); } document.getElementById("div3").onclick = function(e) { console.log("div3"); // window.event.cancelBubble = true; e.stopPropagation(); } </script> </body> </html> ```