Vue-事件修饰符

事件修饰符

prevent （阻止默认事件）

超链接 + 点击事件

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>事件修饰符</h1><h2> prevent 阻止默认事件 </h2><a target="_blank" href="http://www.baidu.com"  @click="showTip">点我提示信息</a> </div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showTip(e){console.log("你好 " + this.name)}},});</script>
</html>

效果

控制台输出： 你好菜逼
新标签页打开： 百度首页

想禁止超链接的默认跳转

解决办法
- 调用事件的阻止默认操作方法 preventDefault

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备一个容器 --><div id="root"><h1>事件修饰符</h1><h2> prevent 阻止默认事件 </h2><a target="_blank" href="http://www.baidu.com"  @click="showTip">点我提示信息</a> </div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showTip(e){e.preventDefault(); // 阻止默认事件方法console.log("你好 " + this.name)}},});</script>
</html>

效果

控制台输出：你好菜逼
不打开新标签页跳转百度首页

在这里插入图片描述

简写

@click="showTip" => @click.prevent="showTip"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>事件修饰符</h1><h2> prevent 阻止默认事件 </h2><a target="_blank" href="http://www.baidu.com"  @click.prevent="showTip">点我提示信息</a> </div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showTip(e){// e.preventDefault(); // 阻止默认事件方法console.log("你好 " + this.name)}},});</script>
</html>

stop (阻止事件冒泡)

DIV 及其子元素 Button 均包含点击事件

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>事件修饰符</h1><h2> stop 阻止事件冒泡 </h2><div @click="showDiv"><button @click="showButton">点我提示信息</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showDiv(e){console.log("你好 Div")},showButton(e){console.log("你好 Button")}},});</script>
</html>

效果

点击按钮, 输出： 你好 Button
div上的点击事件也触发了，输出： 你好 Div

在这里插入图片描述

想禁止触发 Div 的点击事件

解决办法
- 调用事件的阻止事件冒泡方法 stopPropagation

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>事件修饰符</h1><h2> stop 阻止事件冒泡 </h2><div @click="showDiv"><button @click="showButton">点我提示信息</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showDiv(e){console.log("你好 Div")},showButton(e){e.stopPropagation();// 阻止事件冒泡console.log("你好 Button")}},});</script>
</html>

效果

点击按钮, 只输出： 你好 Button

简写

@click="showButton" => @click.stop="showButton"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>事件修饰符</h1><h2> stop 阻止事件冒泡 </h2><div @click="showDiv"><button @click.stop="showButton">点我提示信息</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showDiv(e){console.log("你好 Div")},showButton(e){console.log("你好 Button")}},});</script>
</html>

once （只触发一次）

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>事件修饰符</h1><h2> once 只触发一次 </h2><div @click="showDiv"><button @click.once="showButton">点我提示信息</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showButton(e){console.log("你好 Button")}},});</script>
</html>

效果

多次点击，只输出一次：你好 Button

在这里插入图片描述

capture (使用事件的捕获模式)

Div1、2嵌套且均包含点击事件

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.div1{padding: 5px;background-color: gray;}.div2{padding: 5px;background-color: red;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2> capture 使用事件的捕获模式 </h2><div class="div1"  @click="showMsg('div1')">div1<div class="div2"  @click="showMsg('div2')">div2</div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showMsg(msg){console.log("你好 " + msg)}},});</script>
</html>

效果

事件的捕获是 从外到内 div1 -> div2
事件的冒泡是 从内到外 div2 -> div1·
因此先输出 你好 div2 再输出 你好 div1

在这里插入图片描述

想让按照事件捕获顺序触发事件

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.div1{padding: 5px;background-color: gray;}.div2{padding: 5px;background-color: red;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2> capture 使用事件的捕获模式 </h2><div class="div1"  @click.capture="showMsg('div1')">div1<div class="div2"  @click="showMsg('div2')">div2</div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showMsg(msg){console.log("你好 " + msg)}},});</script>
</html>

效果

@click="showMsg('div1')" => @click.capture="showMsg('div1')"
开启了捕获模式，捕获时就调用方法
先输出 你好 div1 再输出 你好 div2

在这里插入图片描述

self (只有event.target是自己时才调用)

DIV 及其子元素 Button 均包含点击事件

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.div1{padding: 5px;background-color: gray;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2> self 只有event.target是自己时才触发事件 </h2><div class="div1" @click="showDiv"><button @click="showButton">点我提示信息</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showDiv(e){console.log("你好 Div")console.log("div的event.target->",e.target)},showButton(e){console.log("你好 Button")}},});</script>
</html>

效果

先输出 你好 Button
再输出 你好 Div
输出div触发事件的target是 <button >点我提示信息</button> 。（因为是点击按钮的冒泡事件）

在这里插入图片描述

想不是点击div自己就不触发事件

代码

@click="showDiv" => @click.self="showDiv"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.div1{padding: 5px;background-color: gray;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2> self 只有event.target是自己时才触发事件 </h2><div class="div1" @click.self="showDiv"><button @click="showButton">点我提示信息</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showDiv(e){console.log("你好 Div")console.log("div的event.target->",e.target)},showButton(e){console.log("你好 Button")}},});</script>
</html>

效果

只输出 你好 Button div的点击事件没有触发（变向的阻止事件冒泡）

在这里插入图片描述

passive (事件行为立即执行，无需等待回调执行完成)

代码

鼠标滚轮事件 @wheel

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>* {margin-top: 20px;}.list {height: 200px;width: 200px;background-color: gray;overflow: auto;}li {height: 100px;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2>passive 默认事件行为立即执行，无需等待回调执行完成</h2><ul class="list" @wheel="load"><li>a</li><li>b</li><li>c</li><li>d</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示new Vue({el:'#root',data:{name:"菜逼"},methods: {load(e){for(let i = 0; i<10000; i++){setTimeout(1000);console.log("睡了"+(i+1)+ "秒")}console.log("执行完了");}}});</script>
</html>

效果

发现必须等到最终输出 执行完了 滚动条才下移

在这里插入图片描述

想让滚动条直接下移

@wheel="load" => @wheel.passive="load"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>* {margin-top: 20px;}.list {height: 200px;width: 200px;background-color: gray;overflow: auto;}li {height: 100px;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2>passive 默认事件行为立即执行，无需等待回调执行完成</h2><ul class="list" @wheel.passive="load"><li>a</li><li>b</li><li>c</li><li>d</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示new Vue({el:'#root',data:{name:"菜逼"},methods: {load(e){for(let i = 0; i<10000; i++){setTimeout(1000);console.log("睡了"+(i+1)+ "秒")}console.log("执行完了");}}});</script>
</html>

在这里插入图片描述

使用 @scroll 则没有这个问题

@wheel.passive="load" => @scroll="load"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>* {margin-top: 20px;}.list {height: 200px;width: 200px;background-color: gray;overflow: auto;}li {height: 100px;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2>passive 默认事件行为立即执行，无需等待回调执行完成</h2><ul class="list" @scroll="load"><li>a</li><li>b</li><li>c</li><li>d</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示new Vue({el:'#root',data:{name:"菜逼"},methods: {load(e){for(let i = 0; i<10000; i++){setTimeout(1000);console.log("睡了"+(i+1)+ "秒")}console.log("执行完了");}}});</script>
</html>