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

最新推荐文章于 2024-09-12 12:47:00 发布

Smirky-boy

最新推荐文章于 2024-09-12 12:47:00 发布

阅读量2.6k

点赞数

分类专栏：工作经验

本文链接：https://blog.csdn.net/simper_boy/article/details/99550478

版权

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

摘要由CSDN通过智能技术生成

昨天偶然发现旧项目的一个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（即为被同时触