事件修饰符

顾名思义，“事件修饰符”是用来修饰事件的。Vue.js为v-on提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。

 

事件修饰符有：

 

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(不是子元素)触发时回调
.once 事件只触发一次

 

1.阻止冒泡

 

<div id="app" @click=clickDiv()>
   <button @click="clickButton()">点击</button>
</div>
<script>
   var vm=new Vue({
      el:"app",
      data:{},
      methods:{
         clickDiv(){
            console.log("点击了div")
         },
         clickButton(){
         console.log("点击了button")
         }
      }
   })
</script>

 

当点击按钮的时候，浏览器控制台除了会输出“点击了button”还会输出“点击了div”，这是因为button按钮是div里的元素节点，当你点击button的时候，事件会向上冒泡，触发包含它的父元素所定义的事件，这就是冒泡事件。
如果想阻止冒泡事件就需用到“.stop”修饰符。

 

<button @click.stop="clickButton"></button>

 

2.阻止默认事件

什么是默认事件？如：点击a链接自动进行跳转、点击submit按钮自动提交表单等。
这里以a链接为例：

 

<body>
   <div id="app">
      <a href="https://www.baidu.com" @click.prevent="linkclick()">有问题，问百度</a>
   </div>
   <script>
      new Vue({
         el:"app",
         data：{},
         methods:{
            linkclick(){
               console.log("点击了a链接")
            }
         }
      })
   </script>
</body>

 

3.事件捕获

还记得冒泡事件中触发的顺序吗？即：先触发button按钮的点击事件，然后再触发button父元素div的点击事件；如果我想点击button之后先触发父元素div的点击事件，然后再触发子元素button的点击事件呢？

 

<div id="app" @click.capture="clickDiv">
   <button @click="clickButton"点击></button>
</div>

 

即：在事件触发中进行捕获，优先执行含有”.caputre”修饰符的事件。

4.只当事件在该元素本身触发时触发回调

 

<div id="app" @click.self="clickDiv">
   <button @click="clickButton">点击</button>
</div>

 

我们在父元素div里加了”.self”，这样父元素的点击事件只有在点击自身元素的情况下才可以触发，点击其他任何元素（如子元素button）都不会触发包含修饰符”.self”的元素事件。

 

5.事件只触发一次

<body>
   <div id="app">
      <a href="https://www.baidu.com" @click.prevent.once="clicklink">有问题，问百度</a>
   </div>
   <script>
      el:"#app",
      data:{},
      methods:{
         clicklink(){
         console.log("点击了a链接")
         }
      }
   </script>
</body>

 

原文地址：http://www.cnblogs.com/ZhuAo/p/16862461.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性