JS 阻止事件冒泡

 事件分三个阶段：

1.捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。如：Document>Element html>Element body>Element div.

2.目标阶段：执行当前对象的事件处理程序。

3.冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。如Element div<Element body<Element html<Document

阻止事件冒泡案例：

<button id="btn">按钮</button>
<script>
    var btn=document.getElementById("btn");
    document.onclick=function(){
        alert("文档被点击了");
    }
    //阻止冒泡
    btn.onclick = function(){
        alert("按钮被点击了");
        var event = event || window.event;
        //event.stopPropagation(); //停止传播  停止这个事件向上传播
    }
</script>

案例中按钮和页面都有点击（click）事件 （注意:他们是属于父子级关系的），如果点击按钮就会先触发按钮事件再触发页面点击事件，这就是冒泡事件。而要阻止冒泡事件只需要把最后一行注释去掉就可以了。

转载于:https://www.cnblogs.com/zhang-wang/p/6234499.html