如何阻止点击删除叉号时触发父div的onclick事件？

这是DOM事件冒泡导致的问题：当你点击子元素（.section_delete）时，点击事件会从子元素向上传播到父元素，所以deleteSection()执行后，父元素的sectionClicked()也会被触发。

要解决这个问题，只需要在子元素的点击事件处理函数中阻止事件向上冒泡即可，具体实现如下：

原生JavaScript实现 #

1. 直接在HTML绑定事件的情况 #

先修改HTML，把事件对象传递给deleteSection：

<div class="section_delete" onclick="deleteSection(event)">
  <!-- 你的删除叉号图片 -->
</div>

然后在deleteSection函数中调用stopPropagation()：

function deleteSection(event) {
  // 阻止事件冒泡到父元素
  event.stopPropagation();
  
  // 这里写你的删除逻辑
  // ...
}

2. 使用addEventListener绑定事件的情况 #

如果是通过JS代码绑定事件，可以直接在回调中处理：

// 获取子元素
const deleteBtn = document.querySelector('.section_delete');
deleteBtn.addEventListener('click', function(event) {
  // 阻止事件冒泡
  event.stopPropagation();
  // 执行删除逻辑
  deleteSection();
});

额外说明 #

• 如果你的删除叉号区域（.section_delete）实际点击范围比视觉上的叉号大，导致点击外侧空白也触发事件，可以调整该元素的width/height使其和图片尺寸一致，或者把点击事件直接绑定到内部的图片元素上。
• 若需要同时阻止元素的默认行为（比如子元素是链接），可以在函数中额外添加event.preventDefault()，但当前场景只需要阻止冒泡，stopPropagation()就足够。

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