Описание
Я хочу реализовать компонент таблицы с флажками.Проблема, с которой я столкнулся, заключается в том, что, когда я нажимаю флажок, строка щелчка и событие щелчка ячейки таблицы, которые я хочу избежать.Когда я нажимаю флажок, я хочу, чтобы только этот флажок реагировал на событие изменения.
Я пробовал 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.
Я только что попробовал то же самое в vanilla JavaScript только для того, чтобы исследовать, как работает распространение событий в JavaScript.https://codepen.io/anon/pen/xNxgeM?editors=1111
Анимационные GIF-файлы
Vue.js Ver at codesandbox
Когда я нажимаю флажок, то, что я хочу видеть вконсоль только «флажок - изменить».
Vanilla JavaScript Ver на codepen
