JS阻止子元素触发父元素的事件

1. 通过事件对象获取到event.target，然后对event.target的特征进行判断(比如class)。

   不适用于有多个子元素的情况下，因为要做很多判断；
   也不适用于子元素内部又嵌套子元素的情况。

   .parent{
       width:200px;
       height:200px;
       background-color: aqua;
   }
   .children{
       width:100px;
       height:100px;
       background-color: crimson;
   }
   
   <div class="parent" onclick="handleParent()">
       <div class="children"></div>
   </div>
   
   function handleParent(e){
       var e=e||window.event;
       if(e.target.className == 'children'){
           e.stopPropagation();
           e.cancelBubble = true;
           return false;
       }
       alert('点击的是父元素')
   }
   

2. 利用DOM的事件传播机制：

   在DOM2级事件流中包含事件捕获和事件冒泡两个阶段。
   触发事件处理程序时，先是进入事件捕获阶段，事件由外层向内层具体元素传播；然后进入事件冒泡阶段，由内层具体元素再向外层进行传播，事件的处理默认是在冒泡阶段。
   事件捕获是不能被阻止的，否则定位不到具体的元素。

   <div class="parent" onclick="handleParent()">
       <div class="children1">
           <div class="children2"></div>
       </div>
   </div>
   

   当点击父元素parent时，事件进入捕获阶段：
   Document → html → body → div.parent → div.children1 → div.children2
   然后进入冒泡近段并且执行处理方法：
   div.children2(触发事件) → div.children1 (触发事件) → div#parent(触发事件) → body → html → Document
   只要获取到 div.children1 给它添加阻止冒泡事件就可以了。

   function handleParent(e){
       var e = e || window.event;
       //判断传播路径中是否存在children1
       for(var i=0;i<e.path.length;i++){
           if(e.path[i].className && e.path[i].className.indexOf('children1') > -1){
               e.stopPropagation();
               return false;
           }
       }
       alert('点击的是父元素')
   }