vue阻止事件冒泡和默认事件

首先我们要知道什么是事件冒泡,什么是默认事件。

事件冒泡:

<div @click="a">
    <div @click="b"></div>
</div>

 如上代码,事件a和事件b,我点击事件b的时候会将事件a也就是它的父级元素绑定的事件一同触发,这就是冒泡。像水里的气泡一样,从最下面一直咕噜咕噜到最上面。

默认事件:

 一些特殊的标签,比如a标签,input标签和form表单submit这种类型,你点击的话都会有一个默认的提交跳转事件,这是默认的行为,所以是默认事件。

但是我们有的时候只需要触发事件b,或者是只需要把a标签当成一个普通的行标签或者是块标签,这时候需要阻止冒泡和默认事件。

js里面:

function(e){
    e.stopPropagation();//阻止冒泡事件
}
function(e){
    e.preventDefault();//阻止默认行为
    //return false;//也可以
}

 但是vue已经处理好了:

@click.stop 代表阻止冒泡事件

@click.prevent 代表阻止默认事件

原文地址:https://www.cnblogs.com/sixrookie/p/12744333.html