Vue2.0 事件修飾符

事件修飾符：

在時間處理程序中調用event.preventDefault()或者event.stopPropagation()

是非常常見的需求，儘管我們可以在方法中輕鬆實現這一點，但是更好的方法是：

方法只有純粹的數據邏輯，而不是去處理DOM事件細節

爲了解決這個問題，Vue爲v-on提供了事件修飾符，事件修飾符由.開頭的指令後綴

來表示的

.stop
.prevent
.capture
.self
.once
.passive

stop:

<div v-on:click="doThis">
阻止單機事件繼續傳播
<button v-on:click.stop="doThischl">點擊我</button>
<!-- 
意思就是阻止事件冒泡,當點擊button時只會觸發button的doThischl的點擊事件，不會觸發div的doThis的點擊事件 -->
</div>
doThis:function(){
alert("dothis div")
},
doThischl:function(){
alert("dothischl button")
}

.prevent

<form v-on:submit.prevent>
<input type="reset" name="" value="重載">
阻止事件不在重載頁面
</form>

.capture

<div v-on:click.capture="doThis">
即元素自身觸發的事件在此處理，然後才交由內部元素進行處理
<button v-on:click="doThischl">內部的button</button>
誰有.capture修飾符先觸發誰，如果有多個capture，則按照從外向內順序觸發，然後再事件冒泡
</div>

更詳細的案例：

<div id="app">
<div @click="thisalert" id="div1">
div1
<div @click.capture="thisalert" id="div2">
div2
<div @click.capture="thisalert" id="div3">
div3 
<div @click="thisalert" id="div4">
div4
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
id:''
},
methods:{
thisalert: function () {
                this.id= event.currentTarget.id;
                // event.currentTarget ->返回觸發的節點
                alert(this.id)
            }
}

})

點擊div4的時候 觸發順序爲 ： 2 - 3 - 4 - 1

誰有.capture先觸發誰，如果有多個，以由外向內觸發，然後觸發被點擊的元素本身，最後冒泡

.self

只當在event.target是當前元素自身時觸發處理函數：
<!-- .self可以理解爲跳過冒泡事件和捕獲事件，只有直接作用在該元素上的事件纔可以執行 -->
<div v-on:click="doThat">
即事件不是從內部元素觸發的
<div @click="doThis">
div1
<div @click.self="doThis">
<!-- .self會監聽事件是否直接作用在obj2上，如果不是則事件冒泡跳過該元素 -->
<!-- 換個說法就是不點擊div2的時候無法觸發div2的事件 -->
div2
<div @click="doThis">
div3
</div>
</div>
</div>
</div>

修飾符也可以串聯使用 例如：

v-on:click.prevent.self 會阻止所有的點擊

v-on:click.self.prevent 只會阻止對元素自身的點擊

.once:

<div id="app">
<div @click="alertThis" id="div1">
div1
<div @click="alertThis" id="div2">
div2
<div @click.once="alertThis" id="div3">
div3
<div @click.once="alertThis" id="div4">
div4
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
changText:''
}
,methods:{
alertThis:function(){
this.id = event.currentTarget.id
alert(this.id)
}
}
})

</script>

當點擊帶有.once修飾符的div以後，再次點擊則不會再觸發該事件

這個 .passive 修飾符尤其能夠提升移動端的性能。

待深入