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毫秒設置，解決了這個問題