van-collapse阻止事件冒泡_关于Vue的事件修饰符

Vue的事件修饰符：

1. .stop阻止事件的冒泡，阻止事件继续传播
2. .prevent阻止事件原来默认事件
3. .capture捕获监听器，可理解为改变冒泡的顺序
4. .self只在事件本身的元素及以上触发，不在子元素的事件链中
5. .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可以和它自身的父事件进行事件的传播