使用jQuery点击元素获取data属性值，点击子菜单时出现异常弹窗

你猜的完全没错！这个问题就是事件冒泡搞的鬼——当你点击子元素时，点击事件会顺着DOM树往上“爬”，触发所有父元素上绑定的click事件，所以子元素的弹窗出来后，父元素的事件也跟着触发了。

给你几个实用的解决方案：

方案1：直接阻止事件冒泡 #

这是最直接的办法，在事件处理函数里调用e.stopPropagation()，让事件停在当前元素，不再向上传播：

$(document).on('click', ".MyLi", function (e) {
    // 阻止事件继续向上冒泡
    e.stopPropagation();
    var cont = $(this).attr('data-cont');
    alert(cont);
});

方案2：判断事件源是否为当前元素 #

如果你的场景里还需要保留事件冒泡（比如其他父元素要监听这个事件），可以用这个方法——只在点击的元素就是绑定事件的.MyLi本身时才执行逻辑：

$(document).on('click', ".MyLi", function (e) {
    // 检查点击的元素是否是当前.MyLi（而非子元素）
    if ($(e.target).closest('.MyLi')[0] !== this) return;
    
    var cont = $(this).attr('data-cont');
    alert(cont);
});

方案3：用return false（慎用） #

return false在jQuery的事件处理中，相当于同时调用e.stopPropagation()和e.preventDefault()。如果你的元素不需要阻止默认行为（比如a标签跳转），这个方法也能用，但不如方案1精准：

$(document).on('click', ".MyLi", function (e) {
    var cont = $(this).attr('data-cont');
    alert(cont);
    return false;
});

小提示：获取data属性更优的方式 #

另外，jQuery里有专门的data()方法来获取data属性，它会自动转换数据类型（比如数字、布尔值），比attr()更方便：

var cont = $(this).data('cont');

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