Vue中如何阻止表格部分单元格触发行点击事件

嘿，这个场景其实挺常见的，Vue提供的事件修饰符就能轻松解决这个问题！

核心原因是事件冒泡机制：当你点击单元格<td>时，点击事件会向上冒泡到父元素<tr>，所以即使你点的是Child1/Child2，也会触发行上的fireParentEvent。我们要做的就是阻止这两个单元格的事件冒泡。

方法一：使用Vue的.stop事件修饰符 #

直接在Child1和Child2的<td>上添加@click.stop，这样它们的点击事件就不会向上冒泡到行元素了：

<tr @click="fireParentEvent">
  <td @click.stop="child1Action">Child 1</td>
  <td @click.stop="child2Action">Child 2</td>
  <td>Child 3</td>
  <!-- 其他需要触发父事件的td保持原样即可 -->
</tr>

.stop修饰符本质上就是帮你调用了event.stopPropagation()，省去了你手动写代码的麻烦。点击Child1/Child2时，只会执行它们自己的child1Action/child2Action，不会触发行的fireParentEvent；而点击Child3或其他未加修饰符的单元格时，事件会正常冒泡到行，触发父事件。

方法二：手动在事件处理函数中阻止冒泡 #

如果你需要在单元格的事件处理函数里做更多逻辑，也可以手动调用event.stopPropagation()：

<tr @click="fireParentEvent">
  <td @click="child1Action">Child 1</td>
  <td @click="child2Action">Child 2</td>
  <td>Child 3</td>
</tr>

然后在组件的方法里：

methods: {
  child1Action(event) {
    // 阻止事件冒泡到父元素
    event.stopPropagation();
    // 你的其他业务逻辑
    console.log('执行Child1的操作');
  },
  child2Action(event) {
    event.stopPropagation();
    console.log('执行Child2的操作');
  },
  fireParentEvent() {
    console.log('触发父行事件，修改背景色');
  }
}

两种方法都能达到你想要的效果，选哪种看你的具体需求就好～

备注：内容来源于stack exchange，提问作者GuillaumeBB