prevent: 阻止默认事件(常用)
prevent用于阻止默认事件,例如: 本来是个a标签点击后应该打开网页,使用prevent后就可以阻止原本的"打开网页"
在click后面跟上prevent
<div id="root">
<!--prevent: 阻止默认事件(常用)-->
<a href="https://www.yuofyou.cn" @click.prevent="showInfo">点我提示信息</a>
</div>
并在showInfo中写上弹出信息框的代码
<script type="text/javascript">
new Vue({
el:"#root",
data:{
name:'特曼博客'
},
methods:{
showInfo(event){
alert("你好")
}
}
})
</script>
此时 a标签不会跳转网页,只会弹出信息框
stop: 阻止事件冒泡(常用)
在一个div里有一个按钮, 给div添加被点击后执行showInfo
, 给按钮添加被点击后执行showInfo1
<div id="root">
<!--stop: 阻止事件冒泡(常用)-->
<div @click="showInfo" >
<button @click="showInfo1">点我提示信息</button>
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
name:'特曼博客'
},
methods:{
showInfo(event){
alert("你好")
},showInfo1(event){
alert("你好里面的")
}
}
})
</script>
点击按钮后会依次弹出两个信息框
第一个:
第二个:
说明是先执行的showInfo1 再执行的showInfo (像冒泡一样,从内到外)
如果我想阻止这种冒泡, 只需要添加stop
<div @click="showInfo" >
<button @click.stop="showInfo1">点我提示信息</button>
</div>
此时就只会执行按钮的showInfo1事件
once: 事件只触发一次(常用)
正常我们点击按钮的时候, 每次点击都会执行一遍click对应的showInfo 例如:
<button @click="showInfo">点我提示信息</button>
如果我们只想 第一次点击的时候执行showInfo,之后就不再执行了,只需要添加once
<!--once: 事件只触发一次(常用)-->
<button @click.once="showInfo">点我提示信息</button>
capture: 使用事件的捕获模式
运行下面一段代码 观察控制台
<style>
.box1{
padding:5px;
background-color:skyblue;
}
.box2{
padding:5px;
background-color:orange;
}
</style>
<body>
<div id="root">
<div class="box1" @click="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
name:'特曼博客'
},
methods:{
showMsg(msg){
console.log(msg)
}
}
})
</script>
当点击div2时,控制台分别输出 2 1 说明先触发的box2 再触发的box1 这也是上面提到的冒泡
如果我们想先触发box1 再触发box2 ,这就需要使用实际的捕获模式capture
<body>
<div id="root">
<!--capture: 使用事件的捕获模式-->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
</div>
</body>
此时再点击,就是先输出的1 再输出2
self: 只有event.target是当前操作的元素时才触发事件
除了使用.stop修饰符,还有一种修饰符self,意思是只有点击自己的时候才会被执行。 只不过加的位置要加在外层DOM元素的事件上。
<div class="demo1" @click.self="showInfo" >
<button @click="showInfo">点我提示信息</button>
</div>
passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕
当滑动鼠标滚轮的时候, 执行demo ,而此时demo有一个需要很长时间执行的循环, 只有当循环执行完毕以后滚轮才会滑动
<!--passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕-->
<ul @wheel="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
name:'特曼博客'
},
methods:{
demo(){
for(let i=0;i<100000;i++){
console.log('@')
}
console.log("end")
}
}
})
</script>
如果想立即执行滚轮滚动这个工作, 无需等待循环执行完毕.
那么就加上passive
<!--passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕-->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
总结
Vue中的事件修饰符:
- prevent: 阻止默认事件(常用)
- stop: 阻止事件冒泡(常用)
- once: 事件只触发一次(常用)
- capture: 使用事件的捕获模式
- self: 只有event.target是当前操作的元素时才触发事件
- passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>07事件修饰符</title>
<script type="text/javascript" src="../js/vue.js"> </script><!-- 引入Vue-->
<style>
.demo1{
background-color: skyblue;
}
.box1{
padding:5px;
background-color:skyblue;
}
.box2{
padding:5px;
background-color:orange;
}
.list{
width:200px;
height:200px;
background-color: peru;
overflow: auto;
}
li{
height:100px;
}
</style>
</head>
<!--
Vue中的事件修饰符:
1. prevent: 阻止默认事件(常用)
2. stop: 阻止事件冒泡(常用)
3. once: 事件只触发一次(常用)
4. capture: 使用事件的捕获模式
5. self: 只有event.target是当前操作的元素时才触发事件
6. passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕
-->
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!--prevent: 阻止默认事件(常用)-->
<a href="https://www.yuofyou.cn" @click.prevent="showInfo">点我提示信息</a>
<!--stop: 阻止事件冒泡(常用)-->
<hr>
<div @click="showInfo" >
<button @click.stop="showInfo">点我提示信息</button>
</div>
<hr>
<!--once: 事件只触发一次(常用)-->
<button @click.once="showInfo">点我提示信息</button>
<hr>
<!--capture: 使用事件的捕获模式-->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!--self: 只有event.target是当前操作的元素时才触发事件-->
<hr>
<div clss="demo1" @click.self="showInfo" >
<button @click="showInfo">点我提示信息</button>
</div>
<hr>
<!--passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕-->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
name:'特曼博客'
},
methods:{
showInfo(e){
alert('hello')
},
showMsg(msg){
console.log(msg)
},
demo(){
for(let i=0;i<100000;i++){
console.log('@')
}
console.log("end")
}
}
})
</script>
</html>
补充
修饰符可以连写 例如:<a href="https://www.yuofyou.cn" @click.stop.prevent="showInfo">测试</a>