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）事件（注意:他们是属于父子级关系的），如果点击按钮就会先触发按钮事件再触发页面点击事件，这就是冒泡事件。而要阻止冒泡事件只需要把最后一行注释去掉就可以了。