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 相关文章推荐
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
smarty简单分页的实现方法
2014/10/27 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
jquery密码强度校验
2015/12/02 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
Python中的装饰器用法详解
2015/01/14 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
python列表生成器迭代器实例解析
2019/12/19 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
公司业务员岗位职责
2014/03/18 职场文书
公民授权委托书
2014/10/15 职场文书
2014年创卫工作总结
2014/11/24 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python