@click.prevent.self和@click.self.prevent区别

注意：prevent 阻止的是“跳转事件”而不是“弹出警告”

v-on:click.prevent.self的demo如下： 

<div id="box">
<div @click="alert(1)">
<a href="/#" @click="alert(2)">a标签
<div @click="alert(3)">div标签</div>
</a>
</div>
</div>
此时点击a标签会依次弹出2，1，跳转。点击div标签会依次弹出3，2，1，跳转。这发生了事件冒泡。

咱们看一下加上v-on:click.prevent.self之后的：

<div @click="alert(1)">
<a href="/#" @click.prevent.self="alert(2)">a标签
<div @click="alert(3)">div标签</div>
</a>
</div>
此时点击a标签会依次弹出2，1。点击div标签会依次弹出3，1。此时各位看官已经发现，a标签不仅没有冒泡，也没有跳转，这就是官网说的会阻止所有的点击。

 这段是“没文化不开心”网友的解释：

点击div标签，会alert3,alert1。不但阻止了alert(2)，还阻止了a的默认跳转。

因为点击的时候会先prevent，阻止默认事件，阻止了跳转;然后判断是否是self，因为点击到的是div标签，所以不是self。但是a标签是self,阻止了alert(2)。

 

 

 

v-on:click.self.prevent的demo如下：

<div @click="alert(1)">
<a href="/#" @click.self.prevent="alert(2)">a标签
<div @click="alert(3)">div标签</div>
</a>
</div>
点击div标签会依次弹出3，1，跳转。此时a标签没有响应弹框，但是发生了跳转，这就是官网说的只会阻止对元素自身的点击。

 这段是“没文化不开心”网友的解释：

点击div标签，会alert3,alert1,跳转到/#。只阻止了alert(2)。

因为会先判断self，点击到div3，不是self，所以不会执行click事件，就不会执行 阻止默认事件和alert(2) ，所以可以跳转

————————————————
版权声明：本文为CSDN博主「bug菌」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_39105508/article/details/83008604