当复选框输入更改时如何停止事件传播？

Question

描述

我想实现一个带有复选框的表格组件。我遇到的问题是，当我单击复选框时，表格行和表格单元格捕获我想避免的单击事件。当我单击复选框时，我只希望该复选框对更改事件做出反应。

我尝试了event.stopPropagation方法但不起作用。不知何故，在复选框捕获更改事件之前，当我单击该复选框时，包含该复选框的表格行和单元格会对单击事件做出反应。

我怎样才能实现我想要的？请帮我！！

代码

<template>
  <table>
    <tr @click="trClick">
      <td @click="tdClick">
        <input @change="checkboxChange" type="checkbox">
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    trClick() {
      console.log("tr - click");
    },
    tdClick() {
      console.log("td - click");
    },
    checkboxChange(e) {
      e.stopPropagation();
      console.log("checkbox - change");
    }
  }
};
</script>

<style>
table {
  background: #cccccc;
  width: 100%;
  cursor: pointer;
}
input {
  cursor: pointer;
}
</style>

演示链接

Vue.js 版本

我希望这个 Vue 版本能够按我的预期工作。 https://codesandbox.io/s/pjxzvj9jvm

普通 JavaScript 版本。

我只是在普通 JavaScript 中尝试了同样的事情，只是为了研究 JavaScript 中的事件传播是如何工作的。 https://codepen.io/anon/pen/xNxgeM?editors=1111

动画 GIF

Codesandbox 上的 Vue.js 版本

当我单击复选框时，我想在控制台中看到的只是“复选框 - 更改”。

codepen 上的 Vanilla JavaScript Ver

Answer 1

Vue 中有一个内置的解决方案来停止事件传播。只需使用@targetEvent.stop符号：

<input @click.stop @change="checkboxChange" type="checkbox">