van-collapse阻止事件冒泡_关于Vue的事件修饰符
Vue的事件修饰符:.stop阻止事件的冒泡,阻止事件继续传播.prevent阻止事件原来默认事件.capture捕获监听器,可理解为改变冒泡的顺序.self只在事件本身的元素及以上触发,不在子元素的事件链中.once只触发一次.prevent为阻止元素的默认事件,一般有、这些标签原生带有自己的默认事件,在其中的自定义事件中 @click.prevent="fun" ,会阻止原生的默认事件触发;.
Vue的事件修饰符:
- .stop阻止事件的冒泡,阻止事件继续传播
- .prevent阻止事件原来默认事件
- .capture捕获监听器,可理解为改变冒泡的顺序
- .self只在事件本身的元素及以上触发,不在子元素的事件链中
- .once只触发一次
.prevent为阻止元素的默认事件,一般有、这些标签原生带有自己的默认事件,在其中的自定义事件中 @click.prevent="fun" ,会阻止原生的默认事件触发;
.once 带有此修饰符的事件只会触发一次
下面我们关键来讲其他三个.stop .capture.self
1.事件的冒泡顺序,在容器中,事件的触发顺序是从内向外触发的
2.当使用修饰符.stop后,会在当前元素执行完事件后阻止事件向上冒泡(中断事件链)
3.修饰符 .capture 捕获当前元素,并改变默认的冒泡顺序,顺序从外向内(由上至下)
4.修饰符.self 只在当前元素及其父元素上传播,.self当前元素和子元素的传播链断开,.self一般用在父级元素中。
div3触发时,由于div2为其父元素且为.self,因此两个元素不在一个传播链之内,因此会绕过div2触发div1;
div2触发时,默认传播链为由下至上,因此,div1会被触发
5.事件修饰符的混合分析
div3触发时 .capture会先行执行,先执行div1,然后再执行div3,div2断开了子元素因此不会执行
div3触发时,.capture先行执行且由上至下,div1>div2 div2有.stop因此会阻止事件传播
div3触发时,div2 .capture会先行执行,div3 .stop执行后阻止事件继续传播,事件终止
总结:
.stop主要是阻止事件的继续传播(冒泡);
.capture会改变事件的传播(冒泡)顺序,默认由内向外(由下至上),.cature改变为由外向内(由上至下)
.self 一般用在父元素中,断开与子元素的传播链,即:父事件不会向子事件传播,子事件也不会向父事件传播;但.self可以和它自身的父事件进行事件的传播
更多推荐
所有评论(0)