vue中事件修饰符
vue中提供几种事件修饰：1、.stop ：阻止冒泡（就是向上DOM元素）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-s...
·
vue中提供几种事件修饰：
1、.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=edg">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner{
height: 150px;
background-color: darkcyan;
}
.outer{
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 .stop 阻止事件冒泡
此处两个div都绑定了事件,.stop可以有效的阻止在点击改事件时不触发外层div的事件。
不使用的话会向上逐级触发事件
-->
<div class="inner" @click="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{},
methods:{
divHandler:function(){
console.log("触发了 inner ")
},
btnHandler:function(){
console.log("触发了btn")
}
}
})
</script>
</html>2、.prevent ：阻止默认行为
<!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=edg">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner{
height: 150px;
background-color: darkcyan;
}
.outer{
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 阻止默认行为 .prevent
阻止执行href跳转到百度.
-->
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{},
methods:{
linkClick:function(){
console.log("触发了 link")
},
}
})
</script>
</html>3、.capture ：实现捕获触发机制
<!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=edg">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner{
height: 150px;
background-color: darkcyan;
}
.outer{
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!--使用 .capture 实现捕获触发机制
当元素发生冒泡时，先触发带有该修饰符的元素。
点击子元素事件会从父级元素开始触发事件
-->
<div class="inner" @click.capture="divHandler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{},
methods:{
divHandler:function(){
console.log("触发了 inner ")
},
btnHandler:function(){
console.log("触发了btn")
},
}
})
</script>
</html>4、.self ：只有点击自身时才触发事件
<!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=edg">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner{
height: 150px;
background-color: darkcyan;
}
.outer{
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!--使用 .self 实现只有点击当前元素的时候，才能触发事件
点击子元素时不会向上冒泡触发父级元素的事件
-->
<div class="inner" @click.self="divHandler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{},
methods:{
divHandler:function(){
console.log("触发了 inner ")
},
btnHandler:function(){
console.log("触发了btn")
},
}
})
</script>
</html>5、once ：事件只执行一次
<!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=edg">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner{
height: 150px;
background-color: darkcyan;
}
.outer{
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!--使用 .once 事件只触发一次 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{},
methods:{
linkClick:function(){
console.log("触发了 link")
},
}
})
</script>
</html>我们发现.stop与.self的作用似乎相似,那么他们两有什么区别吗？ 答案当然是有(自问自答 - -！)
请各位大佬向下滑动鼠标
<!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=edg">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: darkcyan;
}
.outer {
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- .stop 和 .self 的区别
.self 只会阻止自己 并不会终止冒泡
.stop 终止冒泡
-->
<div class="outer" @click="div2Handler">
<div class="inner" @click="divHandler">
<!-- 会依次触发 btnHandler divHandler div2Handler-->
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
<div class="outer" @click="div2Handler">
<div class="inner" @click="divHandler">
<!-- 只会触发 btnHandler-->
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
divHandler: function () {
console.log("触发了 inner ")
},
div2Handler: function () {
console.log('触发了 outer')
},
btnHandler: function () {
console.log("触发了btn")
},
}
})
</script>
</html>如有不正确或者不完善的，恳请各位大佬批评指正,在此感谢！
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)