移动端点击穿透问题

最新推荐文章于 2023-10-10 14:14:10 发布

heaven.。

最新推荐文章于 2023-10-10 14:14:10 发布

阅读量867

点赞数

CC 4.0 BY-SA版权

文章标签： react.js html5

本文链接：https://blog.youkuaiyun.com/weixin_45298413/article/details/119715723

本文探讨了移动端UI中常见的点击穿透问题，该问题源于click事件的300ms延迟和touch事件的混用。当上层元素使用click，下层元素响应touch时，可能导致点击事件穿透。解决方案包括将上层元素事件改为touch，或者使用react-fastclick等库消除延迟。文章还提到了即使同层元素使用touch事件也可能引发问题，需要谨慎处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题描述

当移动端存在一个弹框，点击弹框会导致下层的盒子中带有点击的元素

被触发。举个例子，在进行一个修改当前元素状态，需要点击当前的状态，然后弹出一个包含所有状态的盒子，点击其中的状态进行修改得到对应的状态。当我们点击修改状态时，上层盒子的点击效果会对下层盒子进行触发，导致本该消失的弹框闪了一下又出现，这种类似于击穿页面的效果就是点击穿透问题。

二、造成这一问题的由来

click是在移动端有300ms的延迟，混用click和touch会导致穿透事件。

经查找资料发现，造成这一问题是因为移动端click事件点击存在300ms延迟（但还有一种情况下面再讲）。至于为什么会存在这一问题，是因为苹果公司当时为应对处理小屏幕的一些功能时做的约定（比如双击缩放），当用户点击后浏览器不能判断当前用户的意图，如果是进行缩放就会再次点击，如果是进行跳转就等待300ms。

在信息化时代高速发展的今天，越来越卷的互联网对于用户需求、体验考虑得也更加的全面，300ms虽然很短，但依然会对用户视觉上存在卡顿，touch事件正好补齐了这样的不足，于是在开发过程中选择touch事件也更加频繁，随之而来的点击穿透问题i也正是我们需要处理的。这其中并不是说仅仅在上层盒子中使用touch事件，下层盒子使用click事件会导致点击穿透，还有另外一种情况，当两个层级的盒子都使用touch事件也会导致这一问题，如何来更好的处理这个问题，接下来进行分析。

三、解决办法

方法一：

很简单，当我们知道是click事件在移动端导致300ms的延迟，而touch事件完善了click事件这一缺点。如果在项目中存在这样情况，把上层换为Touch事件，下层写为Click事件就能很好的解决这一问题，但这样300ms的问题仍然存在，仅仅是缩短了一个300ms。

方法二：

使用react-fastclick插件（react开发）

yarn add react-fastclick

只需要在根节点页面进行引入，这样就不需要再在接下来的页面进行引入，并且不需要再进行添加任何的监听事件。

import initReactFastclick from 'react-fastclick';
initReactFastclick();