vue中的.capture和.self怎么区分

发布时间:2022-04-22 10:05:17 作者:iii
来源:亿速云 阅读:168

今天小编给大家分享一下vue中的.capture和.self怎么区分的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

.capture和.self区分

capture和self主要是函数执行顺序的问题

.capture先执行父级的函数,再执行子级的触发函数(一般用法),

即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。

<div v-on:click.capture='alert("1")' >
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

此时点击子级的div时,会先执行alert(&lsquo;1&rsquo;),再执行alert(&lsquo;2&rsquo;)

self是只执行子级本身的函数

<div v-on:click.self='alert("1")' >
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

此时点击子级的div会执行alert(&lsquo;2&rsquo;),不会执行alert(&lsquo;1&rsquo;)

修饰符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"   @click.self="test1">
       box1
       <div class="box2" >
           box2
<!--box3点击触发test3不会触发test1,如果去除self修饰符就会触发,也就是说加了self元素的事件,只有自身触发才会执行回调,不执行冒泡过来的事件-->
           <div class="box3"  @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>

以上就是“vue中的.capture和.self怎么区分”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. JavaScript的self和this使用小结
  2. PHP中static和self有哪些区别?

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue capture self

上一篇:SpringBoot集成短信和邮件的配置方法

下一篇:elasticsearch元数据怎么构建metadata及routing类

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》