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

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

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

     1   <div id="app" v-on:click="show">
     2             1
     3             <div id="app2" v-on:click.capture="show2">
     4                 2
     5                 <div id="app3" v-on:click="show3">
     6                     3
     7                     
     8                 </div>
     9             </div>
    10         </div>
    11 
    12 
    13         <script type="text/javascript">
    14         var vm=new Vue({
    15             el:"#app",
    16             data:{
    17                 
    18             },
    19             methods:{
    20                 show:function(){
    21                     console.log("这是app的方法")
    22                 },
    23                 show2:function(){
    24                     console.log("这是app2的方法")
    25                 },
    26                 show3:function(){
    27                     console.log("这是app3的方法")
    28                 }
    29             }
    30         })
    31     </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

  • 相关阅读:
    Expression 转化为sql(三) --自定义函数
    C# Expression 树转化为SQL与语句(二)--解决参数问题
    C# Expression 树转化为SQL语句(一)
    C# GetType与typeof
    先序中序求解二叉树(使用二叉查找树原理)
    IRequiresSessionState接口控制
    elastic安装,简单配置
    sublime text插件安装问题
    linux下用户操作
    PHP编译安装
  • 原文地址:https://www.cnblogs.com/xiaozhang666/p/10430059.html
Copyright © 2011-2022 走看看