<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div>
<h1>事件修饰符</h1>
</div>
<div>
<p>1.prevent：阻止默认事件</p>
例子：<a href="http://www.baidu.com" @click.prevent="showInfo">点击阻止默认事件</a>
<p>
解释：加上prevent，此时点击该链接调用showInfo方法后，不会跳转到网址去了
</p>
</div>
<div>
<p>2.stop：阻止事件冒泡</p>
<!-- 阻止事件冒泡---常用 -->
<div @click="showInfo">
<div class="demo1" @click="divClick">
<button @click.stop="buttonClick">点我阻止冒泡</button>
</div>
</div>
<p>
解释：
给button和其父元素均添加了点击事件，vue默认存在事件冒泡，即当子元素事件触发，事件会沿着包含关系依次往上级传递，每一级都可以感知触发事件，直到来到根源。
也就是说，在这个例子中，如果没有stop，那么divClick和buttonClick方法都会调用。但是stop修饰符阻止了事件冒泡，这里就只会调用buttonClick方法了。
</p>
</div>
<div>
<p>3.once：事件只触发一次</p>
<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我只触发一次事件</button>
<p>
解释：让该事件只在第一次触发时调用，后面再点击都没效果了
</p>
</div>
<div>
<p>4.capture：使用事件的捕获模式</p>
<!-- 使用事件的捕获模式 -->
<div @click.capture="showMsg(1)">
div1
<div @click="showMsg(2)">
div2
<div @click="showMsg(3)">
div3
</div>
</div>
</div>
<p>
解释：
上述案例中，如果没有捕获，那么控制台的打印顺序应该是按照事件冒泡的顺序，先里后外，先输出2，后输出1
给父div添加了capture修饰符，则会转为捕获阶段，则点击子div时，会从最外层向点击的目标元素一层一层触发相同的事件，则结果为1，2；
</p>
</div>
<div>
<p>5.passive：事件的默认行为立即执行，无需等待事件回调执行完毕</p>
<!-- 让鼠标滚轮滚动的时候先触发默认行为再执行事件回调 -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p>
解释：
如果没有passive，需要等到事件执行完后再滚动。
就好比看小说，我们可以先滚动到下一章，然后等文章加载出来，而不用等文章加载出来后才能滚动到下一章
</p>
</div>
<div>
<p>6.self：用来针对于当前标签的事件触发，只触发自己标签的上特定动作的事件</p>
<div @click="showInfo">
<div @click.self="divClick">
<button @click="buttonClick">点我提示信息</button>
</div>
</div>
<p>
解释：
由于vue默认是冒泡，如果点击button触发了其身上的点击事件，之后会向外层查找是否有点击事件，
这里div添加了self修饰符，触发点击的目标元素并不是div，则不会触发div上的点击事件。
</p>
</div>
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el: "#root",
data: {
name: "事件修饰符"
},
methods: {
showInfo(e) {
alert("hello！")
console.log(e)
},
showMsg(msg){
console.log(msg)
},
demo(){
for (let i = 0; i < 1000; i++) {
console.log('#')
}
console.log('默认行为立即执行咯')
},
divClick() {
alert("div！")
},
buttonClick() {
alert("button！")
}
}
})
</script>
vue事件处理-事件修饰符
于 2022-10-31 18:38:09 首次发布
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
