注意：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