zoukankan      html  css  js  c++  java
  • Vue事件修饰符,.capture关键字详解

    .prevent 用于阻止默认事件,点击a标签href可以打开相应的链接,那么给事件加
        上此关键字,click.prevent

        .capture 冒泡顺序
        例如 div1中嵌套div2中嵌套div3

    <div id="app" v-on:click="show">
                1
                <div id="app2" v-on:click.capture="show2">
                    2
                    <div id="app3" v-on:click="show3">
                        3
                        
                    </div>
                </div>
            </div>
    
    
            <script type="text/javascript">
            var vm=new Vue({
                el:"#app",
                data:{
                    
                },
                methods:{
                    show:function(){
                        console.log("这是app的方法")
                    },
                    show2:function(){
                        console.log("这是app2的方法")
                    },
                    show3:function(){
                        console.log("这是app3的方法")
                    }
                }
            })
        </script>

     此处的代码因为div2有capture关键字,所以此时冒泡的顺序发生了改变
        正常情况下:
            点击div3一层一层冒泡,先div3=》div2=》div1

        使用了关键字:
            点击div3时,先div2=》div3=》div1
            1.先冒泡外层带有关键字的事件
            2.外层执行结束之后,往里层执行事件
            3.最后按照从里向外的事件开始执行
            就是说只要存在一个capture关键字,就会影响整个嵌套的执行
            例子
                div1中嵌套div2中嵌套div3.capture中嵌套div4
                    此时点击div1
                    先执行带有capture的div3
                    然后执行div4
                    最后按照从里向外的顺序执行
                    顺序就是   div3=》div4=》div2=》div1

            其他疑惑
                此时嵌套为
                div1中嵌套div2.capture中嵌套div3中嵌套div4
                那么可以想一下点击最里层的div4会怎么触发呢
                
                1.触发带有关键字的 div2
                2.触发点击的div4
                3.最后从里向外执行 
                那么顺序为   div2=》div4=》div3=》div1

  • 相关阅读:
    selenium-使用xpath结合text内容定位元素
    pip 安装第三方库报错解决方法
    本地使用git拉取远程指定分支代码
    Python之字符串格式化(format)
    Python之字符串format格式化
    Python中的eval()函数
    用PIL实现滤镜(一)——素描、铅笔画效果
    python勾画图片轮廓
    用python读取带密码的excel文件中的数据
    python中的列表与列表推导式
  • 原文地址:https://www.cnblogs.com/web-record/p/11023362.html
Copyright © 2011-2022 走看看