【只有子標簽和父標簽有相同的事件A時，子標簽使用阻止冒泡,父盒子的事件A才會失效】
【教學視頻】阻止冒泡案例：
理解什么是冒泡：如果一個大盒子box包裹着一個小盒子small，small里在包裹一個button,如果我給與大盒子box 一個事件，那么點擊small或者button都會觸發大盒子事件，因為他倆都屬於大盒子。如果你再給button一個事件， 那么當你點擊button時會觸發該button的事件，然后還會觸發大盒子box的事件。這就是冒泡。 只要孩子和父親有相同的事件，當觸發該事件時就會一層一層向上冒。阻止冒泡事件的方式【具有兼容性】： 標准【Propargation傳播的意思】：event.stopPropargation() ie678:event.cancelBubble = true;
冒泡：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn">點擊</button> </body> </html> <script> var btn = document.getElementById("btn"); document.onclick = function () { alert("你點擊了空白處"); } btn.onclick = function () { alert("你點擊了button"); } </script>
阻止冒泡兼容性檢測：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn">點擊</button> </body> </html> <script> var btn = document.getElementById("btn"); document.onclick = function () { alert("你點擊了空白處"); } btn.onclick = function (event) { var event = event || window.event; if(event && event.stopPropagation) { event.stopPropagation(); // W3C標准 }else { event.cancelBubble = true; //ie678 } alert("你點擊了button"); } </script>