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

通过事件对象获取到 event.target，然后对 event.target 的特征进行判断。

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

.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('点击的是父元素')
}

利用 DOM 的事件传播机制：

<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('点击的是父元素')
}