首页 > Web开发 > 详细

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

时间:2019-03-16 19:21:18      阅读:166      评论:0      收藏:0      [点我收藏+]

首先我们来看原生JS取消事件冒泡方法:

e.stopPropagation(); //非IE浏览器
window.event.cancelBubble = true; //IE浏览器

原生JS阻止默认事件方法:

e.preventDefault(); //非IE浏览器
window.event.returnValue = false; //IE浏览器

而vue.js给我们提供了更简便的方法,我们可以通过function($event)来获取事件对象,$event.target则是选择发生事件的目标元素:

//HTML
<p @click="getEventTar($event)">Test</p>
//JS
getEventTar(el){
console.log(el.target); //<p>Test</p>,这里就相当于通过原生JS获取DOM元素而后可以对其进行一些操作
}

vue.js取消冒泡事件
//只需将click改成click.stop
<p @click.stop="getEventTar($event)">Test</p>

vue.js阻止默认事件
//只需将click改成click.prevent
<p @click.prevent="getEventTar($event)">Test</p>

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

原文:https://www.cnblogs.com/zzsdream/p/10543602.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!