【只有子标签和父标签有相同的事件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>
