IOS点击事件延迟300ms踩坑

最新推荐文章于 2025-09-27 10:00:00 发布

原创最新推荐文章于 2025-09-27 10:00:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios延迟 #延迟300ms #iso点击事件

javascript 同时被 3 个专栏收录

21 篇文章

订阅专栏

前端开发

15 篇文章

订阅专栏

3 篇文章

订阅专栏

本文探讨了苹果iPhone早期因双击缩放功能导致的300毫秒点击延迟问题，以及FastClick解决方案的适用场景和限制。特别讨论了在不同设备和浏览器上FastClick的必要性及对输入焦点的影响。

追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。这当中最出名的，当属双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。

而FastClick在以下情况下不需要使用的：

1.FastClick是不会对PC浏览器添加监听事件

2.Android版Chrome 32+浏览器，如果设置viewport meta的值为width=device-width，这种情况下浏览器会马上出发点击事件，不会延迟300毫秒。

3.所有版本的Android Chrome浏览器，如果设置viewport meta的值有user-scalable=no，浏览器也是会马上出发点击事件。

4.IE11+浏览器设置了css的属性touch-action: manipulation，它会在某些标签（a，button等）禁止双击事件，IE10的为-ms-touch- action: manipulation

所以在ios系统下是需要的。（IOS11 已经修复了300秒延迟。）

但是在使用之后，input 获取焦点会出现问题，需要双击才会唤醒键盘。

这时候可以修改源码来实现，

本人相对简单的解决办法，修改以下位置的代码

var _isTextInput = function(){
  return targetTagName === 'textarea' || (targetTagName === 'input' && targetElement.type === 'text');
};
 
if ((!deviceIsIOS || targetTagName !== 'select') && !_isTextInput()) {
  this.targetElement = null;
  event.preventDefault();
}