我想实现带有复选框的表组件。 我遇到的问题是,当我单击复选框时,我要避免的表行和表单元格捕获单击事件。 当我单击一个复选框时,只希望该复选框对更改事件做出反应。
我尝试了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版本能按预期工作。 https://codesandbox.io/s/pjxzvj9jvm
为了研究JavaScript中事件传播的工作原理,我在香草JavaScript中尝试了同样的方法。 https://codepen.io/anon/pen/xNxgeM?editors=1111
当我单击复选框时,我想在控制台中看到的只是“复选框-更改”。
答案 0 :(得分:0)
Vue中有一个内置解决方案来停止事件传播。只需使用@targetEvent.stop
表示法即可:
<input @click.stop @change="checkboxChange" type="checkbox">