码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-04-21 15:14:21      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:inpu   orm   NPU   绑定   div   它的   类型   就是   ret   

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

事件冒泡:

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

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

标签:inpu   orm   NPU   绑定   div   它的   类型   就是   ret   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!