vue.js中修饰符.stop的用法解析
更新时间:2022年03月26日 16:13:52 作者:有一个王小森
这篇文章主要介绍了vue.js中修饰符.stop的用法解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
修饰符.stop的用法
.stop修饰符是用来阻止冒泡事件的发生的。
用法如下
<a v-on:click.stop="doThis"></a>
下面是全部的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <style> #gpa { margin: 0 auto; width: 100px; height: 60px; background: green; } #pa { width: 60px; height: 40px; background: pink; margin: 0 auto; text-align: center } </style> <body> //--------------------------------重点是这一部分代码。 <div id="gpa" v-on:click="dodo"> <div id="pa" v-on:click="doThat"> <a v-on:click.stop="doThis" href="http://www.baidu.com" rel="external nofollow" >百度</a> //点击百度的时候不发生冒泡,执行doThis函数,然后跳转到百度首页。 </div> //点击粉色部分,即pa部分,发生冒泡,执行doThat,dodo函数。 </div> </body> <script> var gpas = new Vue({ el:'#gpa', data:{ }, methods:{ doThis:function(){ alert("doThis"); }, doThat:function (){ alert("doThat") },dodo:function(){ alert("dodo") } } }) </script> </html>
stop事件修饰符
修饰符 | 说明 |
---|---|
.stop | 阻止冒泡 |
stop事件修饰符具体介绍
.stop
.stop用来防止冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <style> .inner { height: 150px; background-color: gold; } .outer { padding: 40px; background-color: red; } </style> </head> <body> <div id="app"> <div class="inner" @click="div1Handler"> <input type="button" value="点击" @click="btnHandler"> </div> </div> <script> var vm = new Vue({ el:"#app", data: { }, methods: { div1Handler() { console.log('这是触发了 inner div 的点击事件') }, btnHandler() { console.log('这是触发了 btn 按钮 的点击事件') } } }) </script> </body> </html>
页面操作效果
我们看到不光点击按钮的点击事件触发了,而且父容器div的点击事件也触发了,这时我们就可以使用.stop来阻止这个冒泡了,如下
在访问测试
通过输出可以看到点击事件没有往上冒泡了!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue video和vue-video-player实现视频铺满教程
这篇文章主要介绍了vue video和vue-video-player实现视频铺满教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果,本文给大家分享在实现过程中遇到问题,需要的朋友一起看看吧2020-02-02vue3+element-plus Dialog对话框的使用与setup 写法的用法
这篇文章主要介绍了vue3+element-plus Dialog对话框的使用 与 setup 写法的使用,本文通过两种方式结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04Vue3组合式API之getCurrentInstance详解
我们可以通过 getCurrentInstance这个函数来返回当前组件的实例对象,也就是当前vue这个实例对象,下面这篇文章主要给大家介绍了关于Vue3组合式API之getCurrentInstance的相关资料,需要的朋友可以参考下2022-09-09
最新评论