使用JQuery实现点击嵌套HTML二级元素时不触发一级事件求解

你遇到的是典型的DOM事件冒泡问题，有两种常用的解决方式： #

方案1：阻止子级元素的事件向上冒泡 #

给二级菜单的所有元素绑定点击事件，拦截冒泡行为，代码如下：

$(".sub-menu *").click(function(e){
    e.stopPropagation();
})

这个方案的优势是不会修改原有一级菜单的触发逻辑，子元素自身的点击事件也可以正常执行，适合需要保留二级菜单独立点击逻辑的场景。 #

方案2：在一级菜单的点击事件中校验触发源 #

直接修改原有绑定的一级li点击事件，仅当事件的实际触发元素是一级li本身时才执行逻辑，代码如下：

$(".menu > li").click(function(e){
    // 校验触发事件的元素是否为当前一级li本身
    if(e.target === this){
        alert("click");
    }
})

如果需要实现点击一级li内除了sub-menu之外的其他元素（比如一级菜单的文字、图标）都触发事件，可以改成如下判断：

$(".menu > li").click(function(e){
    // 点击元素不在sub-menu范围内就触发逻辑
    if(!$(e.target).closest('.sub-menu').length){
        alert("click");
    }
})

这个方案不需要额外给子元素绑定事件，逻辑更集中，代码冗余度更低。 #

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