vue修饰符.capture和.self的区别


Posted in Vue.js onApril 22, 2022

.capture和.self区分

capture和self主要是函数执行顺序的问题

.capture先执行父级的函数,再执行子级的触发函数(一般用法),

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

<div v-on:click.capture='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

此时点击子级的div时,会先执行alert(‘1’),再执行alert(‘2’)

self是只执行子级本身的函数

<div v-on:click.self='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

此时点击子级的div会执行alert(‘2’),不会执行alert(‘1’)

修饰符capture和self

capture

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

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

就是谁有该事件修饰符,就先触发谁。(捕获阶段触发,从外向内,没有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(event)">
        obj1
        <div id="obj2" v-on:click.capture="doc(event)">
            obj2
            <div id="obj3" v-on:click="doc(event)">
                obj3
                <div id="obj4" v-on:click="doc(event)">
                    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(event) {
                this.id = event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>
</body>
</html>

self

只当事件是从侦听器绑定的元素本身触发时才触发回调

<!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:200px;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
   <div class="box1"  style="background: red;" @click.self="test1">
       box1
       <div class="box2" style="background: yellow;">
           box2
<!--box3点击触发test3不会触发test1,如果去除self修饰符就会触发,也就是说加了self元素的事件,只有自身触发才会执行回调,不执行冒泡过来的事件-->
           <div class="box3" style="background: pink;" @click.self="test3">box3</div>
       </div>
   </div>
</div>
<script type="text/javascript">
new Vue({
    el:'#app',
    data:{
    },
    methods:{
      test1(){
          console.log('box1');
      } ,
        test3(){
          console.log('box3');
        }
    }
})
</script>
</body>
</html>

Tags in this post...

Vue.js 相关文章推荐
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
vue 自定义组件添加原生事件
Apr 21 #Vue.js
vue 自定义的组件绑定点击事件
Apr 21 #Vue.js
vue组件vue-esign实现电子签名
Apr 21 #Vue.js
vue动态绑定style样式
Apr 20 #Vue.js
Vue OpenLayer测距功能的实现
vue 给数组添加新对象并赋值
Apr 20 #Vue.js
vue 数字翻牌器动态加载数据
Apr 20 #Vue.js
You might like
php URL编码解码函数代码
2009/03/10 PHP
php adodb连接不同数据库
2009/03/19 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
再论Javascript的类继承
2011/03/05 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
Vue组件选项props实例详解
2017/08/18 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
基于Python的关键字监控及告警
2017/07/06 Python
Python实现自动发送邮件功能
2021/03/02 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
什么是serialVersionUID
2016/03/04 面试题
如何进行Linux分区优化
2016/09/13 面试题
网上开店必备创业计划书
2014/01/26 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
化工生产实习心得体会
2016/01/22 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js