快捷導(dǎo)航

vue父元素點(diǎn)擊事件與子元素點(diǎn)擊事件沖突問(wèn)題

更新時(shí)間：2023年01月22日 10:39:25 作者：前端韭菜

這篇文章主要介紹了vue父元素點(diǎn)擊事件與子元素點(diǎn)擊事件沖突問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

父元素點(diǎn)擊事件與子元素點(diǎn)擊事件沖突

在做vue項(xiàng)目的時(shí)候，遇到子元素有點(diǎn)擊事件，父元素也有點(diǎn)擊事件，當(dāng)點(diǎn)擊子元素時(shí)往往觸發(fā)的是父元素的點(diǎn)擊事件，產(chǎn)生沖突，怎樣解決這個(gè)問(wèn)題呢？

這就用到vue事件中的事件修飾符，官網(wǎng)地址

Vue.js 為 v-on 提供了事件修飾符 .stop、.prevent、.capture、.self、.once、.passive，我們要處理子元素與父元素的事件沖突就要阻止事件傳遞的產(chǎn)生，而事件修飾符 .stop 的作用是阻止事件繼續(xù)傳播，那么我們需要在子元素的事件上添加事件修實(shí)符 .stop 來(lái)阻止事件傳播。

如下代碼：

 <!-- html -->
 <li class="settingImgLi" 
      :class="{active:index==isActive}" 
      v-for="(image,index) in data.consultList" 
      :key="index"
      <!--父元素事件-->
      @click="handleCurrentItem(image,index)">
                <div style="width:100%;height:100%;position: relative;overflow: hidden;">
                     <img width="100%" height="100%" :src="image.image" alt="">
	                  <div class="img-item-selected">
	                    <Icon type="md-checkmark" />
	                  </div>
                </div>
                <!-- 子元素事件-->
                <div class="img-item-close" @click.stop="removePic(index)">
                  	<i class="el-icon-circle-close"></i>
                </div>
 </li>
  <!-- js -->
  	  handleCurrentItem(image, index) {
       		console.log("父元素")
      },
      removePic(index){
        	console.log("子元素")
      },

事件修飾符

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 -->
<!-- 即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。

因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。（官網(wǎng)有介紹此段）

vue點(diǎn)擊事件（父子層級(jí)元素點(diǎn)擊時(shí)踩坑記錄）

<ul>
    <li @click="fatherClick">
        <div @click.stop="childClick">
        </div>
    </li>
</ul>

var vm_target = new Vue({
                el: '#vm_target',
                data: {
 
                },
                methods:{
                    /**父元素點(diǎn)擊事件**/
                    fatherClick:function(event){
                        var el1 = event.currentTarget;
                                var el2 = event.target;
                    },<br>　　　　　　　　　　　　　　childClick:function(event){ <br>　　　　　　　　　　　　　　　　　　 <br>　　　　　　　　　　　　　　}
                     
                },
                created:function(){
                     
                }
                 
            });

在JS中，event.currentTarget獲取到的是click事件綁定的DOM對(duì)象，event.target獲取到的為當(dāng)前所點(diǎn)擊的DOM對(duì)象。

若綁定了一個(gè)父級(jí)元素后，點(diǎn)擊子元素時(shí)，會(huì)觸發(fā)父元素的點(diǎn)擊事件，若需要點(diǎn)擊子元素時(shí)不觸發(fā)父元素事件

有兩種方法：

1、在父元素中判斷event.currentTarget == event.target是否為true

editTarget:function(event){
? ? ? ?var el1 = event.currentTarget;
? ? ? ?var el2 = event.target;
? ? ? ?if(el1 == el2){
? ? ? ? ? //do something
? ? ? ?} ?
}

2、在子元素中，綁定一個(gè)阻止冒泡的點(diǎn)擊事件 @click.stop