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毫秒设置，解决了这个问题