如何避免div内链触发父元素点击事件的preventDefault与开合逻辑

点击内部<a>标签时事件会通过冒泡触发父级#openclose的绑定事件，只要在事件回调里识别到点击源是链接，直接跳过阻止默认行为和开合逻辑即可，有两种常用实现方式： #

方法1：事件源判断（推荐） #

直接修改现有#openclose的点击回调，通过事件目标判断是否点击了链接，符合条件直接放行，不需要额外绑定事件：

$('#openclose').on('click', function(e) {
    // 向上查找最近的a标签，能兼容a标签内部嵌套图标、文本标签的场景
    if ($(e.target).closest('a').length) {
        return;
    }
    e.preventDefault();
    // 原有开合逻辑
});

这个方案的优势是只需要改一处代码，后续就算动态往#openclose里新增链接，也能正常识别，不需要额外处理。 #

方法2：阻止链接的事件冒泡 #

单独给内部链接绑定点击事件，阻止事件冒泡到父级div，这样父级的点击回调根本不会触发，原有逻辑不需要改动：

// 用事件委托给内部链接绑定事件，阻止冒泡，兼容动态新增的链接
$('#openclose').on('click', 'a', function(e) {
    e.stopPropagation();
});

// 原有父级点击逻辑保持不变
$('#openclose').on('click', function(e) {
    e.preventDefault();
    // 原有开合逻辑
});

注意：这里不要给a标签的事件加e.preventDefault()，否则会把链接本身的跳转行为也拦掉，只需要阻止冒泡即可。

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