vue的.capture和.self区分

时间:2022-06-03 翼晗人气:0

.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>

以上是本人暂时的理解，希望可以帮助到大家，如果有不同见解，可以一起讨论学习！！

加载全部内容