Vue.js中@click.self.stop导致子元素点击失效的解决需求
2026-5-19
解决点击内部标签无法触发事件的问题
问题根源
你当前用了@click.self.stop，这里的.self修饰符是核心问题：它只会在**直接点击绑定事件的元素本身（也就是标签）**时触发逻辑，点击内部子元素（）时，事件的目标是，所以不会触发的点击事件。再加上.stop阻止了事件冒泡，子元素的点击事件根本传不到父级上。
两种可行解决方案
方案1：移除.self修饰符（推荐）
这是最简单直接的方式，移除.self后，不管点击本身还是它内部的任何子元素，事件都会冒泡到标签，从而触发绑定的removeRow()方法。同时要确保能正确获取的data-id，这里必须用event.currentTarget而非event.target——因为currentTarget永远指向绑定事件的元素（也就是），而target是实际被点击的元素（可能是）。
示例代码：
<!-- 修改后的HTML结构 --> <a @click.stop="removeRow" data-id="your-row-id"> <i class="your-icon-class"></i> 删除行 </a>
// 对应的Vue方法 methods: { removeRow(event) { // 获取data-id属性值，两种方式任选其一 const rowId = event.currentTarget.dataset.id; // 或者 const rowId = event.currentTarget.getAttribute('data-id'); // 执行你的删除逻辑 console.log(`删除ID为${rowId}的行`); // ...后续删除操作 } }
方案2：给内部标签单独绑定事件（适合特殊场景）
如果你因为某些业务限制必须保留.self修饰符（其实一般没必要），可以给标签单独绑定点击事件，直接调用removeRow()，并确保能拿到的data-id。
示例代码：
<a @click.self.stop="removeRow" data-id="your-row-id" ref="deleteLink"> <i class="your-icon-class" @click.stop="removeRow($event)"></i> 删除行 </a>
methods: { removeRow(event) { // 判断点击源，分别获取data-id const rowId = event.currentTarget.tagName === 'I' ? this.$refs.deleteLink.dataset.id : event.currentTarget.dataset.id; // 执行删除逻辑 console.log(`删除ID为${rowId}的行`); // ...后续删除操作 } }
关键提示
- 优先选择方案1，它更简洁，符合事件冒泡的正常逻辑，不需要额外绑定子元素的事件。
- 一定要区分
currentTarget和target：前者是绑定事件的元素，后者是实际触发事件的元素，我们需要的是的data-id，所以必须用currentTarget。
内容的提问来源于stack exchange，提问作者Branko Dragovic
相关产品推荐
相关产品推荐
