vue.js阻止事件冒泡和預設事件
阿新 • • 發佈:2019-02-13
首先我們來看原生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>