如何阻止父元素点击事件在子元素触发时执行？

这事儿本质是**事件冒泡（Event Bubbling）**在搞鬼——当你点击内层的红色div时，点击事件会顺着DOM树往上“冒泡”，触发外层蓝色div的点击事件。你之前用的$("#inner").off()和$("#inner").unbind()是用来移除元素上的事件绑定的，这完全不是你要的效果，毕竟你还需要内层div能正常响应点击并打印"inner"对吧？

正确的解决方案：阻止事件冒泡 #

在jQuery里，你可以通过事件对象的stopPropagation()方法来阻止事件继续向上传播。修改你的内层点击事件代码就行：

$("#outer").click(function(){
    console.log("outer");
});

$("#inner").click(function(e){
    // 阻止事件冒泡到父元素
    e.stopPropagation();
    console.log("inner");
});

补充说明 #

• e.stopPropagation()只会阻止事件向上冒泡，不会影响当前元素的事件执行，也不会阻止浏览器的默认行为（比如点击链接跳转）。
• 如果你需要同时阻止默认行为，可以在事件处理函数里调用e.preventDefault()，或者直接写return false（在jQuery中，return false等价于同时调用stopPropagation()和preventDefault()）。

完整可运行代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="outer">
    <div id="inner"></div>
</div>

<style>
#outer{
    background-color: blue;
    width: 500px;
    height: 700px;
}
#inner{
    background-color: red;
    width: 100%;
    height: 100px;
}
</style>

<script>
$("#outer").click(function(){
    console.log("outer");
});

$("#inner").click(function(e){
    e.stopPropagation();
    console.log("inner");
});
</script>

这样修改后，点击红色区域只会打印"inner"，点击蓝色区域（除了红色部分）就会打印"outer"，完美符合你的需求~

内容的提问来源于stack exchange，提问作者Guerrilla