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>