click 在 ios 上有 300ms 延迟，原因及如何解决

最新推荐文章于 2024-06-27 23:40:06 发布

liberalhumblehopeful

最新推荐文章于 2024-06-27 23:40:06 发布

阅读量556

点赞数 7

文章标签：前端 javascript html5 ios

本文链接：https://blog.csdn.net/fhrlhh/article/details/136187445

版权

(1)禁用缩放

(2)利用 FastClick，其原理是：

检测到 touchend 事件后，立刻出发模拟 click 事件，并且把浏览器 300 毫秒之后真正出

发的事件给阻断掉，

但是fastClick,也存在一些问题：

移动端点击input不灵敏，需要点击很多次才有反应
调起手机原生软键盘卡、慢
点击穿透
点击错位（点了A，触发了B）

所以如果页面不需要缩放的话，首选第一个解决方案

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

liberalhumblehopeful

关注关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
click 在 ios 上有 300ms 延迟，原因及如何解决

检测到 touchend 事件后，立刻出发模拟 click 事件，并且把浏览器 300 毫秒之后真正出。所以如果页面不需要缩放的话，首选第一个解决方案。
复制链接

扫一扫

前端面经如何解决click在移动端ios上有300ms的延迟

Ahua_Core的博客

03-02

1544

click在移动端ios上有300ms的延迟的原因和解决方法原因方法一、粗暴型：禁用缩放方法二、FastClick 原因 2007年苹果发布首款Iphone上ios搭载的safari，为了能把PC端大屏幕的页面以较好的效果展示在小屏幕手机端上，采用了双击缩放（double tap to zoom）的方案。而这就是click在移动端ios会有300ms的缘由。因为，浏览器怎么区分用户是只要单击操作还是要双击进行缩放操作。所以设置了300ms的延迟时间，加以判断用户是单击还是双击缩放。浏览器会在捕获用户第一

IOS 解决UIButton 点击卡顿/延迟的问题

09-01

本文主要介绍 IOS UIButton, 这里给大家提供代码实例作为参考,解决 UIButton 点击卡顿或者延迟问题,在开发 IOS 项目的小伙伴如果遇到这样的问题可以参考下

参与评论您还未登录，请先登录后发表或查看评论

探讨一下解决移动端点击300ms延迟方案

最新发布

qq_44186810的博客

06-27

197

把viewport设置成设备的实际像素，那么就不会有这300ms的延迟，并且这个举动受到了IE/Firefox/Safari（IOS9.3）的支持，也就是说现在移动端开发可以不用顾虑click会比较迟钝的问题了。听到前辈们说移动端尽量不要使用click，因为click会比较迟钝，能用touchstart还是用touchstart。：移动端要判断是否是双击，所以单击之后不能够立刻出发click，要等300ms，直到确认不是双击了才触发click。使用fastclick.js插件。设置viewport。

前端面经 click在ios上有300ms延迟，原因及如何解决

qq_56303170的博客

11-01

1196

前端面经 click在ios上有300ms延迟，原因及如何解决

移动端click事件300ms延迟产生原因以及解决方式

weixin_50767381的博客

07-04

1280

300ms延迟产生原因双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。那么这和 300 毫秒延迟有什么联系呢？假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。鉴于iPhone的成功，其他移动浏览器都复制了

click 在 ios 上有 300ms 延迟，原因及如何解决？

超级罗伯特的博客

03-29

158

检测到 touchend 事件后，立刻出发模拟 click 事件，并且把浏览器 300 毫秒之后真正。(1)粗暴型，禁用缩放。

解决ios下，点击延迟300ms的办法

weixin_36633980的博客

03-23

3255

在开发微信端时，发现在Android下面，click事件非常的流畅，而在IOS下却有一定的延迟。查了查资料，发现早在2007年，苹果为了解决在Iphone这种小屏幕浏览器站点的问题，就设置了300毫秒的延迟。这是为了系统判断用户是双击还是单击屏幕。网上面有很多的解决方案，推荐一个比较好用，而且也是非常稳定的方案 : fastclick.js github 使用方法在头部加入：

IOS设备上给body绑定click事件不生效的原因及解决办法

09-01

总结来说，iOS设备上`body`的`click`事件代理失效主要是由于300ms点击延迟和某些元素不支持事件冒泡导致的。开发者可以通过使用`touch`事件、改变事件代理策略、添加`cursor:pointer`样式或者更换元素类型来解决这个...

清除从iOSwebview点击的300ms延迟

08-10

"清除从iOS webview点击的300ms延迟"的核心目标就是尽可能快地响应用户的单击操作，避免等待300毫秒的延迟。为此，开发者可以使用以下几种方法： 1. **FastClick库**：FastClick是一个轻量级的JavaScript库，它的...

01-移动端click-300ms-延迟.md

03-31

移动端click-300ms延迟是指在移动设备上，用户点击屏幕后，浏览器会有大约300毫秒的延迟时间来判断用户是进行单击操作还是双击缩放操作。这一延迟是由于在智能手机开始流行时，移动浏览器为了支持点击缩放...

Vue移动端开发解决300ms点击延迟—FastClick

01-20

总的来说，FastClick是一个非常实用的工具，尤其是在Vue移动端开发中，它可以显著提升用户体验，消除300毫秒的点击延迟。通过正确地引入和配置，可以让用户的每次点击都能得到快速、准确的响应，从而增强应用的交互...

移动端 FastClick--解决ios点击延迟问题

qq_39355295的博客

01-01

523

**前提：**本地js定义一个方法，在手机上测试的时候是点击事件，但是在ipad上确实双击事件，查看网上解决方法，发现是因为ios本身就存在延迟问题：下面是我收藏的解决方法：(备注：本次是使用vue开发项目) 解决方法文章 ...

ios点击延时的处理

前端

01-05

1117

点击时反应存在延时，导致点击感觉慢，用户体验不好 //记载fastclick loadJavascript(&quot;./js/fastclick.js&quot;, function () { FastClick.attach(document.body); }); /** * 动态加载JS * @param {string} url 脚本地址 * @param {function} callback ...

IOS移动端click事件300ms的延迟响应

weixin_50629151的博客

02-19

741

一、问题由来？移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的. 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的

ios h5 点击事件失效及点击延迟

热门推荐

小不点的博客

09-26

1万+

1.ios h5 app avalon tap事件失效使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-tap被内容遮住不执行.用MUI的on tap事件可以执行但改动较大,于是改为ms-on-click.(但是click事件有300ms延迟,解决方法在标题2处),搜索到以下解决方法:

微信开发：解决IOS端下面的点击延迟问题

02-13

9710

最近在开发微信端时，发现在Android下面，click事件非常的流畅，而在IOS下却有一定的延迟。查了查资料，发现早在2007年，苹果为了解决在Iphone这种小屏幕浏览器站点的问题，就设置了300毫秒的延迟。这是为了系统判断用户是双击还是单击屏幕。网上面有很多的解决方案，推荐一个比较好用，而且也是非常稳定的方案 : fastclick.js

ios移动端点击事件延迟300ms

qq_32601115的博客

09-12

342

一、tap.js解决方案 script src="tap.js">script> div id="container"> button id="button-1">Click eventbutton> button id="button-2">Tap eventbutton> div> div id="output">div>

解除IOS系统click事件延迟（fastclick）

weixin_43776523的博客

02-02

1192

解除IOS系统click事件延迟 IOS系统下默认的click事件会有300毫秒的延迟，可以使用fastclick来消除这个延迟。 1、引入fastclick(官网 https://github.com/ftlabs/fastclick) <script src="../lib/fastclick.js"></script> 2、具体方法 $(function() {...

IOS点击事件延迟300ms踩坑

helloschurmi的博客

09-04

1388

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