如何保留父元素点击事件，避免内部链接触发该事件？

这问题确实挺常见的，我来给你两种实用的解决思路，都能保留div的点击功能，同时避免点击内部链接时触发它：

方法一：在父元素事件中过滤点击目标 #

我们可以在div的click事件里，判断点击的目标是不是内部的链接元素，如果是就跳过div的逻辑。修改你的jQuery代码如下：

var div = $('.div');
div.on('click', function(e) {
    // 检查点击的元素是否是a标签（或a的子元素）
    if (!$(e.target).closest('a').length) {
        e.stopPropagation();
        e.preventDefault();
        div.toggleClass('red');
    }
});

原理说明 #

closest('a')会向上查找最近的a标签，如果找到就说明点击的是a或者它的子元素（你的例子里a没有子元素，但这个写法更通用），这时我们就不执行div的样式切换逻辑。如果点击的是div本身，就正常执行toggleClass。

方法二：给子元素单独绑定事件阻止冒泡 #

另一种思路是直接给内部的a标签绑定click事件，阻止事件冒泡到父元素div。代码如下：

var div = $('.div');
div.on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    div.toggleClass('red');
});

// 给内部链接添加事件，阻止冒泡到div
div.find('a').on('click', function(e) {
    e.stopPropagation();
    // 如果你需要a标签正常跳转，就不要加下面这行
    // e.preventDefault();
});

原理说明 #

点击a标签时，e.stopPropagation()会阻止事件向上冒泡到div，所以div的click事件不会被触发。如果需要a标签正常跳转，记得去掉e.preventDefault()，这样用户点击链接就能正常打开目标地址。

两种方法都能解决你的问题，你可以根据实际场景选择：如果内部有很多不同类型的子元素都需要排除，方法一更高效；如果只有明确的几个子元素需要处理，方法二更直观。

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