vue事件修饰符的v-on:click.prevent.self与v-on:click.self.prevent区别

今天看vue文档时,事件修饰符里面有一部分看不明白,特地写了个demo测一下,一些新手心得,互相学习。

疑问如下:

vue事件修饰符的v-on:click.prevent.self与v-on:click.self.prevent区别_第1张图片

emmm  是什么意思?

 

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

        

此时点击a标签会依次弹出2,1,跳转。点击div标签会依次弹出3,2,1,跳转。这发生了事件冒泡。

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

此时点击a标签会依次弹出2,1。点击div标签会依次弹出3,1。此时各位看官已经发现,a标签不仅没有冒泡,也没有跳转,这就是官网说的会阻止所有的点击。

 

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

            

点击div标签会依次弹出3,1,跳转。此时a标签没有响应弹框,但是发生了跳转,这就是官网说的只会阻止对元素自身的点击

你可能感兴趣的:(vue事件修饰符的v-on:click.prevent.self与v-on:click.self.prevent区别)