如何阻止事件的冒泡行為 · 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> ```