VUE中事件修飾符：stop prevent self capture

時間 2019-12-13

標籤 vue 事件修飾 stop prevent self capture 简体版

原文原文鏈接

<!DOCTYPE html>javascript
 
 < 
 html  
 lang="en"> 
 
 < 
 head 
 > 
 
 < 
 meta  
 charset="UTF-8"> 
 
 < 
 title 
 >修飾符：self capture stop prevent的使用</ 
 title 
 > 
 
 < 
 script  
 type="text/javascript" src="vue.js"></ 
 script 
 > 
 
 </ 
 head 
 > 
 
 < 
 body 
 > 
 
 < 
 div  
 id="demo"> 
 
 <!--第一種狀況--> 
 
 <!--<div @click="divEven" style="border:1px #188eee solid;">--> 
 
 <!--<a href="www.baidu.com" @click="aEven">百度連接</a>--> 
 
 <!--</div>--> 
 
 <!--stop的使用：阻止事件冒泡的發生--> 
 
 <!--<div @click="divEven" style="border:1px #188eee solid;">--> 
 
 <!--<a href="www.baidu.com" @click.stop="aEven">百度連接</a>--> 
 
 <!--</div>--> 

 <!--prevent的使用：阻止默認事件的發生--> 
 
 <!--<div @click="divEven" style="border:1px #188eee solid;">--> 
 
 <!--<a href="www.baidu.com" @click.stop.prevent="aEven">百度連接</a>--> 
 
 <!--</div>--> 

 <!--self的使用：只有點擊他自己時纔去執行，點擊他的子元素不去執行--> 
 
 <!--<div @click.self="divEven" style="border:1px #188eee solid;">--> 
 
 <!--<a href="www.baidu.com" @click.prevent="aEven">百度連接</a>--> 
 
 <!--</div>--> 

 <!--capture的使用：觸發捕獲事件()先執行大盒子的事件，起執行小盒子的事件--> 
 
 < 
 div  
 @click.capture="divEven" style="border:1px #188eee solid;"> 
 
 < 
 a  
 href="www.baidu.com" @click.prevent="aEven">百度連接</ 
 a 
 > 
 
 </ 
 div 
 > 
 
 </ 
 div 
 > 
 
 < 
 script 
 > 
 
 new Vue({ 
 
 el:"#demo", 
 
 methods:{ 
 
 divEven(){ 
 
 alert("我是div的事件"); 
 
 }, 
 
 aEven(){ 
 
 alert("我是a連接事件"); 
 
 } 
 
 } 
 
 }); 
 
 </ 
 script 
 > 
 
 </ 
 body 
 > 
 
 </ 
 html 
 >

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。