vue中父元素点击事件与子元素点击事件冲突

编辑时间：2024-12-10 14:15 作者：nllihui6390 浏览量：190

在做vue项目的时候，遇到子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？这就用到vue事件中的事件修饰符，官网地址https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6。

Vue.js 为 v-on 提供了事件修饰符 .stop、.prevent、.capture、.self、.once、.passive，我们要处理子元素与父元素的事件冲突就要阻止事件传递的产生，而事件修饰符 .stop 的作用是阻止事件继续传播，那么我们需要在子元素的事件上添加事件修实符 .stop 来阻止事件传播。如下代码：