点击最内部盒子时,会反生事件冒泡,所以会依次执行 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(被跳过)