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

来源:互联网 发布:淘宝下拉菜单小图标 编辑:程序博客网 时间:2024/05/30 21:59

首先我们来看原生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>//JSgetEventTar(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>
原创粉丝点击