Vue中事件修饰符使用总结_vue 中 event.stoppropagation()

Vue中事件修饰符使用总结

在javaScript事件处理程序中经常调用event.preventDefault()和event.stopPropagation()等方法，在vue中对应着v-on的事件修饰符，具体如下：

< !-- .stop对应着event.stopPropagation()方法，阻止单击事件继续传播（捕获或冒泡） -->
< a v-on:click.stop="doThis">

< !-- .prevent对应着event.preventDefault()方法（阻止元素在的默认行为），再重载页面 -->
<form v-on:submit.prevent="onSubmit">

< !-- 修饰符可以串联，排在前面的修饰符优先级大于排在后边的修饰符的优先级 -->
<a v-on:click.stop.prevent="doThat">

< !-- 只有修饰符 -->
<form v-on:submit.prevent>

< !-- 添加事件监听器时使用事件捕获模式 -->
< !-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">

< !-- 只当在 event.target 是当前元素自身时触发处理函数 -->
< !-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">

重点：使用修饰符时，修饰符顺序很重要：排在前面的修饰符优先级大于排在后边的修饰符的优先级。 因此:

v-on:click.prevent.self：会阻止所有的点击，即当且仅当点击当前元素（即event.target是当前元素自身时）时，只触发带有.self事件修饰符的事件（下例中只触发a方法）;点击非当前元素时，冒泡到当前元素时会阻止当前元素的默认行为，也不触发带有.self事件修饰符的事件; prevent.self,事件修饰符.prevent优先级高于.self事件修饰符的优先级
v-on:click.self.prevent:只会阻止对元素自身的点击，即意思是：点击元素自身时，会阻止元素自身的默认行为，但是会触发当前元素的带有.self事件修饰符的事件；但是点击非当前元素时，不会阻止当前元素的默认行为，但是不会触发带有.self事件修饰符的事件。self.prevent,事件修饰符.self优先级高于.prevent事件修饰符的优先级
1
2

例子：
<div @click="div">
　　<a href="http://www.baidu.com" @click.self.prevent="a">a标签
　　　　<div @click="b">div标签
　　</a>
</div>


div(){alert(1);}
a(){alert(2);}
b(){alert(3);},
1
2
3
4
5
6
7
8
9
10
11

点击div标签会依次弹出3，1，跳转，此时a标签没有响应弹框，但是发生了跳转；点击a标签依次弹出2，1，不跳转；
若a标签的监听事件为@click.prevent.self，点击div标签会依次弹出3，1，不跳转；点击a标签依次弹出2，1，不跳转；