如何为a标签与内部img标签绑定独立点击事件互不触发？

你遇到的问题核心是DOM事件冒泡机制：因为<img>是<a>的子元素，当你点击<img>时，事件会从子元素向上传播到父元素，所以两个mouseup事件都会被触发。要实现点击两者触发不同逻辑且互不干扰，只需要在子元素的事件处理中阻止事件冒泡即可。

具体实现步骤： #

1. 在<img>的mouseup事件处理函数中调用e.stopPropagation()，这样事件就不会向上传递到父元素<a>；
2. 修正你代码里的语法错误（比如选择器引号缺失、函数括号闭合问题）。

修改后的代码如下：

$('div').on("mouseup", 'a', function(e) {
    // 点击a标签时的逻辑：弹出更换URL的界面
    console.log("触发a标签事件：更换URL");
});

$('div').on("mouseup", 'img', function(e) {
    // 阻止事件冒泡，避免触发父元素a的事件
    e.stopPropagation();
    // 点击img时的逻辑：弹出更换图片的界面
    console.log("触发img标签事件：更换图片");
});

额外说明： #

如果你的<a>标签内部只有<img>（没有其他可点击的空白区域），那点击<a>的本质还是点击<img>。如果需要区分点击<a>的非图片区域触发对应逻辑，可以给<a>设置合适的padding或者固定宽高，留出可点击的独立区域。

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