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

时间:2019-05-05 12:09:20

标签: vue.js vuejs2 vue-component

说明

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

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

如何实现我想要的?请帮帮我!

代码

<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

Vanilla JavaScript Ver。

为了研究JavaScript中事件传播的工作原理,我在香草JavaScript中尝试了同样的方法。 https://codepen.io/anon/pen/xNxgeM?editors=1111

动画GIF

在codeandbox上的Vue.js Ver

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

codepen上的Vanilla JavaScript Ver

enter image description here

1 个答案:

答案 0 :(得分:0)

Vue中有一个内置解决方案来停止事件传播。只需使用@targetEvent.stop表示法即可:

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