如何解决嵌套于可点击div内的img点击触发父元素跳转的问题？

这是典型的DOM事件冒泡导致的问题——当你点击子元素<img>时，点击事件会沿着DOM树向上冒泡，触发父元素<div>的onClick事件。不过别担心，有几种简单的方法可以阻止这种行为：

方法1：在子元素的事件处理函数中阻止冒泡 #

修改你的moveToLeft函数，让它接收事件对象并调用stopPropagation()方法，这样就能阻止事件向上传递给父元素：

首先更新HTML中的事件绑定，传递事件参数：

<div id="div4" onClick="redirect()"> 
  <img id="img4" onClick="moveToLeft(event)" /> 
</div>

然后修改moveToLeft函数：

function moveToLeft(event) {
  // 执行你的图片左移逻辑
  // 比如：document.getElementById('img4').style.left = '...';
  
  // 阻止事件冒泡到父元素
  event.stopPropagation();
}

方法2：在事件绑定中直接返回false #

如果不想修改函数，也可以在<img>的onClick属性里直接返回false——这会同时阻止事件冒泡和元素的默认行为（不过对于图片来说，默认行为没什么影响）：

<div id="div4" onClick="redirect()"> 
  <img id="img4" onClick="moveToLeft(); return false;" /> 
</div>

方法3：使用现代事件绑定方式（推荐） #

把事件绑定从HTML中分离出来，用addEventListener绑定事件，这样代码更清晰，也更易维护：

// 绑定父元素的跳转事件
document.getElementById('div4').addEventListener('click', redirect);

// 绑定子元素的左移事件，并阻止冒泡
document.getElementById('img4').addEventListener('click', function(event) {
  moveToLeft();
  event.stopPropagation();
});

这样修改后，点击图片只会触发moveToLeft()，不会再触发父元素的跳转事件啦。

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