Vue.js中点击删除子组件外区域也触发删除功能如何解决

问题原因 #

你将删除的点击事件绑定在了DeleteButton组件的根<div id="delete-button">元素上，div作为块级元素默认宽度为100%，会撑满父容器的整行宽度，所以只要点击这个div所在的整行区域，哪怕视觉上不在删除图标位置，也会触发删除逻辑，并不是真的点击了组件以外的区域。

修复方案 #

可根据实际需求选择以下任意方案：

• 方案1：限制根元素的宽高，只保留删除图标实际的点击区域
  给DeleteButton的根元素添加CSS样式，将块级元素转为行内块，限制宽高为图标实际尺寸即可：

#delete-button {
  display: inline-block;
  width: 24px; /* 可替换为你实际的图标宽度 */
  height: 24px; /* 可替换为你实际的图标高度 */
  cursor: pointer;
}

• 方案2：将点击事件绑定到实际的删除图标元素上
  不要把事件绑定在根div，直接绑定到垃圾桶图标元素上，这样只有点击图标本身才会触发删除逻辑，修改DeleteButton的template代码即可：

<template>
  <div id="delete-button">
    <input type="checkbox" id="checkbox">
    <!-- 点击事件移到图标元素上 -->
    <div id="bin-icon" @click.prevent="removeProductFromCart(item.id)">
      <div id="lid"></div>
      <div id="box">
        <div id="box-inner">
          <div id="bin-lines"></div>
        </div>
      </div>
    </div>
  </div>
</template>

• 方案3：保留复选框独立功能，阻止点击冒泡
  如果点击复选框不需要触发删除逻辑，给复选框添加点击事件阻止冒泡即可：

<input type="checkbox" id="checkbox" @click.stop>

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