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>