1. 程式人生 > >vue.js阻止事件冒泡和預設事件

vue.js阻止事件冒泡和預設事件

首先我們來看原生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>