事件修饰符：

在时间处理程序中调用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是当前元素自身时触发处理函数：

<div v-on:click="doThat">
即事件不是从内部元素触发的
<div @click="doThis">
div1
<div @click.self="doThis">


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 修饰符尤其能够提升移动端的性能。

待深入

Vue2.0 事件修饰符

事件修饰符：

猜你喜欢