vue click事件穿透

事例：

在一個頁面有兩個div，一個div用來顯示附近熱門地址，另一個div顯示搜索出來的地址，一個變量控制兩個div的顯示和隱藏

搜索列表使用的是touch事件來代替click事件，當選擇了搜索出來的地址列表的一項時，就隱藏搜索列表

發現：

當選擇的搜索地址中的某一項與熱門地址某一項綁定click事件的元素位置重疊時，總是會觸發該熱門地址元素的click事件

<div class="page">
    <div class="hot" 
            v-show="!showSearchList" 
            v-on:click.stop="chooseAddress(1)"></div>
    <div class="search" 
            v-show="!showSearchList" 
            v-on:touchstart.stop="touchStart"
            v-on:touchmove.stop="touchMove"    
            v-on:touchend.stop="touchEnd"
            v-on:click.stop></div>
  </div>                    

 

原因：

可能是當設置

showSearchList=false時，頁面更新的時間小於300ms,導致搜索列表隱藏了，顯示出熱門地址模塊，所以當前click事件的target就在顯示出來的熱門地址上了，導致觸發了click

將變量延遲300毫秒設置，解決了這個問題