码迷,mamicode.com
首页 > 其他好文 > 详细

vue学习(六) 事件修饰符 stop prevent capture self once

时间:2019-05-03 16:49:56      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:type   格式   默认   eth   cti   html   UNC   其他   htm   

//html
<div id="app">
  <div @click="divHandler" style="height:150px,background-color:darkcyan">
    <input type="button" value="点击" @click="btnHandler">
  </
div>

  <a href="http://www.bilibili.com" @click="linkClick">跳转到bilibili</a>

  <div @click.capture="divClick" style="hight:150px,background-color:grey">
    <input type="button" value="按一下" @click="buttonClick">
  </div>

  <a href="http://weibo.com" @click.once="weibo">连接到微博</a>
</div>
//script <script>   var vm = new Vue({     el:app,     data:{       msg:点击一下     },     methods:{//methods中定义了当前vue实例中所有可用的方法       divHandler:function(){        console.log(‘触发了div的点击事件‘)       },
      btnHandler(){
       console.log(‘触发了btn的点击事件‘)
      },
      linkClick(){
       console.log(‘触发了链接的点击事件‘)
      },
      divClick(){
       console.log(‘触发了div点击事件‘)
      },
      buttonClick(){
       console.log(‘触发了button点击事件‘)
      }     }   })
</script>

简介:

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件监听器时使用事件捕获方式

.self 只当事件在该元素本身(比如不是子元素)触发时触发回调

.once 事件只触发一次

说明:

点击按钮,控制台会打印 触发了btn的点击事件 触发了div的点击事件 默认是冒泡机制,里边的btn被外边的div包裹着,点击里边的,事件会一层一层往外冒,先调用内层的click在调用外层的click。

如果想阻止冒泡,需要给按钮的click事件加上.stop  格式是  <input type="button" value="点击" @click.stop="btnHandler">,执行的效果就是 只会出发btn的点击事件不会触发外层div的点击事件

当我们点击跳转去bilibili的时候,控制台会打印 触发了链接的点击事件 页面跳转到B站  会跳转。如果我们不想让跳转,可以使用.prevent组织默认事件  格式是  <a href="http://www.bilibili.com" @click.prevent="linkClick"></a>

 

给外层div的click时间加上.capture  点击按钮的作用效果,就和冒泡相反了 先执行外层div的click事件,在执行内层button的click时间,控制台  触发了div点击事件  触发了button点击事件

如果仅仅想通过点击div来触发div的点击事件,需要给div的click加上.self  格式是<div @click.self="divClick"></div>  其他的不管是冒泡还是捕获 通通都不执行div的点击事件 

给click加上once,该点击事件只会被触发一次,不会触发第二次 

事件修饰符是可以串联用的@click.prevent.once

vue学习(六) 事件修饰符 stop prevent capture self once

标签:type   格式   默认   eth   cti   html   UNC   其他   htm   

原文地址:https://www.cnblogs.com/xuchao0506/p/10805213.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!