详解Vue 事件修饰符capture 的使用


Posted in Javascript onDecember 29, 2017

.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式

即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。

就是谁有该事件修饰符,就先触发谁。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>.capture事件修饰符</title>
  <style type="text/css">
    * {
      margin: 0 auto;
      text-align: center;
      line-height: 40px;
    }
    div {
      width: 100px;
    }
    #obj1 {
      background: deeppink;
    }
    #obj2 {
      background: pink;
    }
    #obj3 {
      background: hotpink;
    }
    #obj4 {
      background: #ff4225;
    }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="content">
  <div id="obj1" v-on:click.capture="doc">
    obj1
    <div id="obj2" v-on:click.capture="doc">
      obj2
      <div id="obj3" v-on:click="doc">
        obj3
        <div id="obj4" v-on:click="doc">
          obj4
          <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候,弹出的顺序为:obj1、obj2、obj4、obj3;
          由于1,2有修饰符,故而先触发事件,然后就是4本身触发,最后冒泡事件。
          -->
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var content = new Vue({
    el: "#content",
    data: {
      id: ''
    },
    methods: {
      doc: function () {
        this.id = event.currentTarget.id;
        alert(this.id)
      }
    }
  })
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的Vue 事件修饰符capture 的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
详解Javascript获取缓存和清除缓存API
May 25 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 #Javascript
node简单实现一个更改头像功能的示例
Dec 29 #Javascript
JavaScript 中使用 Generator的方法
Dec 29 #Javascript
js中url对象化管理分析
Dec 29 #Javascript
JS计算距当前时间的时间差实例
Dec 29 #Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 #Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 #Javascript
You might like
PHP+DBM的同学录程序(4)
2006/10/09 PHP
使用apache模块rewrite_module (转)
2007/02/14 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
php自定义错误处理用法实例
2015/03/20 PHP
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
vue实现选中效果
2020/10/07 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
简单实现python爬虫功能
2015/12/31 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
Python字典对象实现原理详解
2019/07/01 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Python requests模块cookie实例解析
2020/04/14 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
电子信息专业学生自荐信
2013/11/09 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
党员剖析材料范文
2014/12/18 职场文书
中学生思想品德评语
2014/12/31 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS