vue中事件修饰符有5种:
1. .stop 阻止冒泡
2. .prevent 阻止默认事件
3. .capture 添加事件侦听器时使用事件捕获机制
4. .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
5. .once 事件只触发一次
每种方法的使用及特点如实例中所示:
<div class="inner" @click="divdisplay">
<input type="button" value="戳他" @click="btnclick">
</div>
<!--.stop 阻止了button向外冒泡,只能触发自己的事件 -->
<div class="inner1" @click="divdisplay">
<input type="button" value="戳他" @click.stop="btnclick">
</div>
<!-- .prevent属性是使这个触发事件触发但是默认事件被阻止了-->
<a href="http://www.baidu.com" @click.prevent="linkclick">有问题,找度娘</a>
<!-- 点击当前元素时,才会触发事件处理函数 -->
<div class="inner3" @click="divdisplay">
<input type="button" value="戳他" @click.self="btnclick">
</div>
</div>
<!-- .self 只会阻止自身的冒泡的触发,不会阻止其他的触发,但.stop 可以阻止该元素外的所有元素的触发-->
</div>