vue中的.capture和.self區分及初步理解

2022-04-22 10:00:47

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

以上是本人暫時的理解，希望可以幫助到大家，如果有不同見解，可以一起討論學習！！

vue中的.capture和.self區分及初步理解

目錄

.capture和.self區分

修飾符capture和self

capture

self

熱門文章