事件修饰符stop在vue.js中的功能应用方法
导读：在这篇文章中，我们将学习“事件修饰符stop在vue.js中的功能应用方法”的相关知识，下文有详细的介绍及示例，小编觉得挺不错的，有需要的朋友可以借鉴参考，希望对大家阅读完这篇能有所获。 修饰符.st...
在这篇文章中，我们将学习“事件修饰符stop在vue.js中的功能应用方法”的相关知识，下文有详细的介绍及示例，小编觉得挺不错的，有需要的朋友可以借鉴参考，希望对大家阅读完这篇能有所获。
修饰符.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来阻止这个冒泡了，如下
在访问测试
通过输出可以看到点击事件没有往上冒泡了！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持萬仟网。
以上就是关于“事件修饰符stop在vue.js中的功能应用方法”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 事件修饰符stop在vue.js中的功能应用方法
本文地址： https://pptw.com/jishu/654401.html