vue移动端点击穿透事件(实例)-工作笔记

最新推荐文章于 2025-04-24 17:23:52 发布

原创

最新推荐文章于 2025-04-24 17:23:52 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

本文记录了在Vue移动端项目中遇到的点击穿透问题，详细解析了问题产生原因及三种解决方案：1) 使用FastClick库；2) 延迟更新遮罩层变量控制路由跳转；3) 比较event.target与event.currentTarget决定是否跳转。其中，FastClick在某些情况下可能无效，而延迟更新可能导致页面卡顿。建议根据项目情况选择合适的方法。

昨天偶然发现旧项目的一个bug
在这里插入图片描述

当点击这个时间列表的事件时，同时会触发其背后红色背景的跳转事件（也就是两个事件的元素重叠在一起，若是点击2018年06月则不会，因为未重叠）。其中时间列表是子组件，部分代码如下

<ul class="select-ul">
     <li class="select-list" v-for="(value, index) in list.data" 
     :key="index" 
     @click="update($event)" 
     :data-id="index"
     :data-type="value.id">{
  
  {value.name}}
     </li>
</ul>

注意上面的@click，update事件（即为时间列表点击事件）。
父组件红色背景代码
在这里插入图片描述
router-link默认为a标签，跳转路由/share/user（即为被同时触发的红色背景事件）。
下面有三种解决方案。
**~~1、FastClick（其意义是检查用户是否在做双击事件）~~ **
因为移动端设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，而FastClick能够立即响应用户的点击事件。（这里的点击穿透事件可以理解为300毫秒后才触发了update事件，这样同时也触