vue中的事件修饰符顺序问题

Question

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

不是很理解官方文档中这句话，然后在网上找也没找到有详细分析这句话的。v-on:click.prevent是会阻止所有传递来的事件的默认行为，然后后面再加上.self是元素本身触发时才触发回调函数，是这个意思吗？

Answer 1

它的意思就是前面的条件满足了，才会去执行后面的。

// 给a一个内边框
<div class="a">
    <div class="b"></div>
</div>

[e-mail]="c"的意思是当你点击的元素是a的时候，才会prevent默认事件，而且执行c事件，如果你点击了b，由于事件传播，传播给了a，但是这个时候判断出这个点击事件不是a触发的，所以不会prevent，也不会触发c事件。

[e-mail]="c"总是先执行prevent，无论是内部元素还是本身元素触发，他都会prevent默认事件。只不过只有当你点击a元素的时候，才会触发c事件，点击内部元素不触发c事件。

所以官网上的这句话，v-on:click.prevent.self 会阻止所有的点击的意思是它会阻止所有点击的默认事件，并且只有点击当前元素才会触发你定义的事件。同理可理解后面那句话。

Answer 2

<img src="notValidUrl" onerror=alert(1)>