vue中的.capture和.self怎么區(qū)分

發(fā)布時(shí)間：2022-04-22 10:05:17 來(lái)源：億速云閱讀：162 作者：iii 欄目：開(kāi)發(fā)技術(shù)

今天小編給大家分享一下vue中的.capture和.self怎么區(qū)分的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

.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")' >
            <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")' >
            <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í)使用事件捕獲模式

就是誰(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"   @click.self="test1">
       box1
       <div class="box2" >
           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"  @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怎么區(qū)分”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

vue中的.capture和.self怎么區(qū)分

.capture和.self區(qū)分

修飾符capture和self

capture

self

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽