目錄
什么是事件修飾符
其實就是對事件的一些影響，如下
.stop 阻止冒泡
.prevent 阻止默認事件
.capture 添加事件偵聽器時使用事件捕獲模式
.self 只當事件在該元素本身(比如不是子元素)觸發時觸發回調
.once 事件只觸發一次
先看一遍，下面我會詳細介紹這些事件修飾符
沒有事件修飾符的問題
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../lib/vue-2.6.10.js"></script>
<style>
.inner{
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 這個div就是MVVM中的V，View -->
<div id="app">
<div class="inner" @click="divHandler">
<input type="button" value="點我" @click="btnHandler"></input>
</div>
</div>
<script>
// 這個vm就是MVVM中的VM，ViewModel
var vm=new Vue({
el: '#app',
// 這個data就是MVVM中的M，Model
data: {
},
methods: {
divHandler(){
console.log('這個是inner div的點擊事件')
},
btnHandler(){
console.log('這個是btn 按鈕的點擊事件')
}
}
})
</script>
</body>
</html>
運行
點擊按鈕，你會發現控制台下先輸出按鈕的log，再輸出外層的div的log，這個就是冒泡機制
現在我的目的是，只觸發按鈕的log，不觸發div的log，使用事件修飾符
使用事件修飾符
.stop阻止冒泡
把按鈕的HTML修改成如下
<input type="button" value="點我" @click.stop="btnHandler"></input>
加了.stop之后就沒有冒泡了，所以按鈕的事件執行之后，不會冒泡外層的事件了，所以我們看結果成功的實現了阻止冒泡
.prevent 阻止默認事件
默認事件最經典的就是a標簽的鏈接默認跳轉
HTML如下
<a href="http://www.cnblogs.com/yunquan/" @click="linkHandler">蜀雲泉的博客</a>
Vue的事件自己加這個
linkHandler(){
console.log('這個是link鏈接的點擊事件')
}
你點擊鏈接，肯定會跳轉我的博客的，這就是默認事件，我們加上.prevent
<a href="http://www.cnblogs.com/yunquan/" @click.prevent="linkHandler">蜀雲泉的博客</a>
你再點擊，就不會跳轉了。
.capture 添加事件偵聽器時使用事件捕獲模式
所謂的捕獲模式，就是冒泡模式的反向，冒泡模式是先內層后外層，捕獲模式是先外層后內層，HTML如下
<div class="inner" @click.capture="divHandler">
<input type="button" value="點我" @click="btnHandler"></input>
</div>
效果圖如下：
.self 只當事件在該元素本身(比如不是子元素)觸發時觸發回調
點擊按鈕的時候，div會因為冒泡機制也被調用，所以可以給div加一個self，就是只有我點擊div本身的時候才會調用div的log
<div class="inner" @click.self="divHandler">
<input type="button" value="點我" @click="btnHandler"></input>
</div>
.once 事件只觸發一次
就是事件只觸發一次，還以鏈接為例，加了once之后，第一次點擊鏈接不會跳轉，再次點擊就可以跳轉了
<a href="http://www.cnblogs.com/yunquan/" @click.prevent.once="linkHandler">蜀雲泉的博客</a>
.stop和.self的區別
學了事件修飾符之后，stop和self有一點點像是吧，但是區別也很大。
stop是直接阻止了冒泡行為，self僅僅阻止了自身的冒泡，並沒有阻止整個冒泡機制
假如按鈕外部有兩個div，一個父div一個子div，按鈕加個.stop就沒有冒泡行為了
子div加個.self之后，冒泡還是有的，父div會被冒泡機制影響，所以通俗的講
.stop是斬草除根，.self是獨善其身
防盜鏈接：本博客由蜀雲泉發表