vue 如何阻止事件冒泡与设置捕获行为
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
在vue中比如你给父元素设置了鼠标点击事件,父元素的儿砸也设置了点击事件,但是有时候点击了儿砸的事件但是父亲的事件也被触发了,这时候我们只想触发儿砸的点击事件,怎么办呢。
在JS中我们阻止事件冒泡与捕获时间是使用event.stopPropagation()的方法来阻止。
在vue中我们怎么阻止呢接下来我们来看在vue中怎么阻止冒泡与捕获事件的
请各位看下面代码
.stop 阻止冒泡事件
.capture 设置捕获事件
.self 只有点击当前元素的时候,才会触发处理函数
.once 处理函数只被触发一次
注:这些事件修饰符都是可以链式调用的
蓝色为day1
红色为day2
当我们点击了day2,day1的事件也会被执行
默认冒泡事件
// 这是两个点击事件
<div class="day1" @click="day1Click">
<div class="day2" @click="day2Click"></div>
</div>
export default {
name: "incident",
data(){
return {}
},
methods:{
day1Click(){
console.log('这是触发了day1事件');
},
day2Click(){
console.log('这是触发了day2事件');
}
}
}
解决方案
阻止冒泡事件
<!--使用 .stop 阻止冒泡事件-->
<!--很简单只需要在点击事件后面加上 .stop 就ok了-->
<div class="day1" @click="day1Click">
<div class="day2" @click.stop="day2Click"></div>
</div>
现在再来刷新页面再点击一次
设置捕获事件
捕获:函数从外到内执行 比如点击day2标签先执行day1的方法再执行day2的方法
如果你想设置捕获事件也很简单
<!--使用 .capture 设置捕获事件 需要给父级元素添加 -->
<!--很简单只需要在点击事件的父元素后面加上 .capture 就ok了-->
<div class="day1" @click.capture="day1Click">
<div class="day2" @click="day2Click"></div>
</div>
只有点击自己本身才触发事件,什么冒泡,捕获我统统都不能执行这个事件
<!--使用 .self 实现只有点击当前元素的时候,才会触发处理函数 -->
<!--只需要在当前元素的点击事件的后面加上 .self 就ok了-->
<div class="day1" @click.self="day1Click">
<div class="day2" @click="day2Click"></div>
</div>
事件只触发一次
设置 .once 之前
点击 day1 可以看到你点击多少次,day1的函数就会执行多少次
<div class="day1" @click.self="day1Click">
<div class="day2" @click="day2Click"></div>
</div>
设置 .once 之后
点击day1 可以看到无论点击多少次day1,它的函数都只会执行一次
<!--使用 .once 实现点击当前元素的时候,处理函数只被触发一次 -->
<!--只需要在当前元素的点击事件的后面加上 .once 就ok了-->
<div class="day1" @click.self.once="day1Click">
<div class="day2" @click="day2Click"></div>
</div>
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)