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+vant实现购物车全选和反选功能
Nov 17 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 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
浅析is_writable的php实现
2013/06/18 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
python如何调用字典的key
2020/05/25 Python
Python新手学习装饰器
2020/06/04 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
工商企业管理应届生求职信
2013/11/03 职场文书
校园安全广播稿
2014/02/08 职场文书
销售人员求职信
2014/07/22 职场文书
安全环保演讲稿
2014/08/28 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
史上最牛的辞职信
2015/02/28 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
bat批处理之字符串操作的实现
2022/03/16 Python