vue中的.capture和.self區(qū)分及初步理解

更新時(shí)間：2022年04月22日 08:53:56 作者：翼晗

這篇文章主要介紹了vue中的.capture和.self區(qū)分及初步理解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

.capture和.self區(qū)分

capture和self主要是函數(shù)執(zhí)行順序的問(wèn)題

.capture先執(zhí)行父級(jí)的函數(shù)，再執(zhí)行子級(jí)的觸發(fā)函數(shù)(一般用法)，

即是給元素添加一個(gè)監(jiān)聽(tīng)器，當(dāng)元素發(fā)生冒泡時(shí)，先觸發(fā)帶有該修飾符的元素。若有多個(gè)該修飾符，則由外而內(nèi)觸發(fā)。

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

此時(shí)點(diǎn)擊子級(jí)的div時(shí)，會(huì)先執(zhí)行alert(‘1’),再執(zhí)行alert(‘2’)

self是只執(zhí)行子級(jí)本身的函數(shù)

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

此時(shí)點(diǎn)擊子級(jí)的div會(huì)執(zhí)行alert(‘2’)，不會(huì)執(zhí)行alert(‘1’)

修飾符capture和self

capture

.capture事件修飾符的作用添加事件偵聽(tīng)器時(shí)使用事件捕獲模式

即是給元素添加一個(gè)監(jiān)聽(tīng)器，當(dāng)元素發(fā)生冒泡時(shí)，先觸發(fā)帶有該修飾符的元素。若有多個(gè)該修飾符，則由外而內(nèi)觸發(fā)。

就是誰(shuí)有該事件修飾符，就先觸發(fā)誰(shuí)。（捕獲階段觸發(fā)，從外向內(nèi)，沒(méi)有capture修飾符的，從內(nèi)向外冒泡觸發(fā)）

<!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
                    <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。點(diǎn)擊obj4的時(shí)候，彈出的順序?yàn)椋簅bj1、obj2、obj4、obj3；
                    由于1，2有修飾符，故而先觸發(fā)事件，然后就是4本身觸發(fā)，最后冒泡事件。
                    -->
                </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

只當(dāng)事件是從偵聽(tīng)器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)

<!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點(diǎn)擊觸發(fā)test3不會(huì)觸發(fā)test1，如果去除self修飾符就會(huì)觸發(fā),也就是說(shuō)加了self元素的事件，只有自身觸發(fā)才會(huì)執(zhí)行回調(diào)，不執(zhí)行冒泡過(guò)來(lái)的事件-->
           <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>

以上是本人暫時(shí)的理解，希望可以幫助到大家，如果有不同見(jiàn)解，可以一起討論學(xué)習(xí)??！

您可能感興趣的文章: