事件修饰符

点击最内部盒子时，会反生事件冒泡，所以会依次执行 b、span、p的事件

<p @click="pOn">{{p}}<span @click="spanOn">{{span}}<b @click="bOn">{{b}}</b></span></p>

 

.stop阻止冒泡

<p @click="pOn">{{p}}<span @click="spanOn">{{span}}<b @click.stop="bOn">{{b}}</b></span></p>

给予最内部b .stop时，会阻止事件冒泡行为，从而只会执行b的事件

 

.prevent阻止默认行为

<a @click.prevent="aOn" href="http://www.baidu.com">{{a}}</a>

会阻止被绑定的DOM元素的自带行为，从而a只会执行绑定事件，不会跳转页面

 

.capture转变为捕获触发机制

<p @click.capture="pOn">{{p}}<span @click="spanOn">{{span}}<b @click="bOn">{{b}}</b></span></p>

给予其父元素时，再次点击最里层元素时，会捕获进最里层DOM，从而依次触发p、span、b的事件

 

.once 只触发依次该事件

<i @click.once="iOn">{{i}}</a>

给予i .once后，点击i后会触发i的绑定事件1次，之后再次点击i，其上的绑定事件会失效

 

.self 

<p @click="pOn">{{p}}<span @click.self="spanOn">{{span}}<b @click="bOn">{{b}}</b></span></p>

触发冒泡/捕获后，如果冒泡或/捕获触发到自己时，会跳过自己，不触发自身所绑定的事件

所以在点击b时，进行冒泡时，会跳过span的事件，因此触发的事件依次为b、p。span（被跳过）