一般情況下
Vue 阻止事件冒泡用 .stop 即可解決
Vue 阻止事件默認行為用 .prevent 解決
今天這里是介紹 Vant 框架里寫購物車,需求是購物車中的商品點擊也可以進入到商品詳情,於是在 card 標簽加了 click 事件,就導致點擊步進器 van-stepper 增加減少也會觸發 card 的 click ,用原生事件 event.stopPropagation() 即可完美解決
<van-stepper
v-model="val.quantity"
@plus="plusNum(val.id)"
@minus="minusNum(val.id)"
min="1"
disable-input
/>
plusNum(id) {
event.stopPropagation(); // 阻止事件冒泡
console.log(id);
},
minusNum(id) {
event.stopPropagation(); // 阻止事件冒泡
console.log(id);
},