详解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 相关文章推荐
jQuery对象[0]是什么含义?
Jul 31 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
js实现图片上传到服务器和回显
Jan 19 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更新mysql后获取改变行数的方法
2014/12/25 PHP
微信红包随机生成算法php版
2016/07/21 PHP
php二维码生成以及下载实现
2017/09/28 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
Vue与React的区别和优势对比
2020/12/18 Vue.js
使用Python的判断语句模拟三目运算
2015/04/24 Python
python基于socket实现网络广播的方法
2015/04/29 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
活动邀请函范文
2014/01/19 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
建筑工地宣传标语
2014/06/18 职场文书
企业员工集体活动方案
2014/08/17 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
失职检讨书大全
2015/01/26 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
mysql知识点整理
2021/04/05 MySQL