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-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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也可以?成Shell Script
2006/10/09 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
jQuery事件用法详解
2016/10/06 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
python获取栅格点和面值的实现
2020/03/10 Python
Python 如何对文件目录操作
2020/07/10 Python
python time()的实例用法
2020/11/03 Python
python中uuid模块实例浅析
2020/12/29 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
小学毕业感言150字
2014/02/05 职场文书
淘宝活动策划方案
2014/02/06 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
走近毛泽东观后感
2015/06/04 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
Docker下安装Oracle19c
2022/04/13 Servers