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+penlayers实现多边形绘制及展示
Dec 24 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue 实现上传组件
May 31 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 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
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
php对象工厂类完整示例
2018/08/09 PHP
php适配器模式简单应用示例
2019/10/23 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
jquery map方法使用示例
2014/04/23 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
JavaScript手机振动API
2016/06/11 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
js实现登录与注册界面
2017/11/01 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python的Django框架安装全攻略
2015/07/15 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
django序列化serializers过程解析
2019/12/14 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
航空学院求职信
2014/06/11 职场文书
社保转移委托书范本
2014/10/08 职场文书
龙门石窟导游词
2015/02/02 职场文书
交心谈心活动总结
2015/05/11 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
golang语言指针操作
2022/04/14 Golang