点这里@click=“事件名”,这是常规方法,但是如果需要阻止事件冒泡的话,可以在click后面加上 .stop,完整写法是:@click="event.stop",用上面的例子的..._vue阻止冒泡和默认事件">
当前位置:   article > 正文

vue点击事件如何阻止事件冒泡以及取消默认事件_vue阻止冒泡和默认事件

vue阻止冒泡和默认事件

一、阻止事件冒泡方法:

在vue中,一般情况下我们是这样绑定事件方法的:

<div class="parent-wrapper" @click="clickWrapper">点这里</div>

@click=“事件名”,这是常规方法,但是如果需要阻止事件冒泡的话,可以在click后面加上 .stop,完整写法是:@click="event.stop",用上面的例子的写法就是:

<div class="parent-wrapper" @click.stop="clickWrapper">点这里</div>

二、取消默认事件方法:

方法跟上面差不多,也是在click后面添加: .prevent

<div class="parent-wrapper" @click.prevent="clickWrapper">点这里</div>

如果要阻止事件冒泡也要取消默认事件,也可以将上面的写法连写,如:

<div class="parent-wrapper" @click.stop.prevent="clickWrapper">点这里</div>

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/79377
推荐阅读