js阻止事件冒泡的發生
阿新 • • 發佈：2019-01-31
原始碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin:0; padding:0; } #outer{ position: relative; width:400px; height: 400px; background:yellow; } #inner{ position: absolute; width:100px; height: 100px; background:cyan; } </style> </head> <body> <div id="outer"> <div id="inner"></div> </div> </body> </html> <script type="text/javascript"> var inner = document.getElementById("inner"); var outer = document.getElementById("outer"); inner.onclick = function (event) { var event = event||window.event; //能力檢測 if(event.stopPropagation) { //高階瀏覽器寫法 event.stopPropagation(); } else { //對於IE低階瀏覽器寫法 event.cancelBubble = true; } console.log("inner"); } outer.onclick = function (argument) { console.log("outer"); } </script>
