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

转载于:https://www.cnblogs.com/panyujun/p/11065741.html