阻止冒泡

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

前进时，请别遗忘了身后的脚印。