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使用Elementui修改默认的最快方法
Dec 05 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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
isset和empty的区别
2007/01/15 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
vue-cli配置flexible过程详解
2019/07/04 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
js实现抽奖功能
2020/11/24 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
python实现获取序列中最小的几个元素
2014/09/25 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
基于python的字节编译详解
2017/09/20 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
大学生水果店创业计划书
2014/01/28 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
嘉宾邀请函
2015/01/31 职场文书