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

Posted 2021-02-28 sixrookie

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

事件冒泡：

<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 代表阻止默认事件