VUE中事件修饰符：stop prevent self capture-CSDN博客

<!DOCTYPE html>
 
  < 
  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 
  >