移动端点击延迟问题研究

马忠志发布于2019-08-22 10:45 / 1178人阅读

摘要：为了判断用户是否是进行双击操作。因为移动端双击是放大文字的手势操作。可以让特定的元素或者整个文档中的元素移除点击延迟的问题，同时不会影响通过事件代替事件。对于交互相对复杂的移动端页面或应用是一个相对不错的解决方案。

移动端点击延迟问题研究 测试 html

javascript

// 通过是否调用 fastclick 这个库来屏蔽点击延迟来查看是否存在点击延迟的问题
// FastClick.attach(document.body);

var touchEndTime;
var clickTime;
var clickDelay;

function now() {
    return new Date().getTime();
}

$("#btn").on("click", function() {
    clickTime = now();
    clickDelay = clickTime - touchEndTime;
    alert(clickDelay);
});

$("#btn").on("touchEnd", function() {
    touchEndTime = now();
});

这个页面包含 meta 标签：

测试结果

测试环境：iPhone6s微信内置浏览器
未使用 fastclick：测试结果延迟在 350 ～ 370 之间

使用 fastclick: 测试结果在 0 ～ 5 之间

测试环境：iPhone6s贝贝客户端v4.9.05

未使用 fastclick: 测试结果在 5 ~ 20 之间

使用 fastclick：测试结果在 0 ~ 5 之间

什么是点击延迟

现在我们来看看什么是点击延迟？点击延迟是指移动端浏览器在 touchend 和 click 之间存在 300ms ～ 350ms 的延迟。为了判断用户是否是进行双击操作。因为移动端双击是放大文字的手势操作。

解决方案

对于chrome和firefox，可以通过禁用伸缩，即在 head 上的 meta 标签添加 user-scalable = no。如下：

chrome32+ 可以将 viewport 的宽度设置成 device-width.

IE10+，可以使用 pointerEvents。可以让特定的元素或者整个文档中的元素移除点击延迟的问题，同时不会影响 pinch-zooming

a, button, .myelements
{
-ms-touch-action: manipulation;    /* IE10  */
touch-action: manipulation;        /* IE11+ */
}

通过 touchend 事件代替 click 事件。

使用 zepto.js 的 tap 事件，通过 singleTap 和 doubleTap 来区分单击和双击。但是会出现点击穿透，而且对于已经使用 click 的文件，改动成本太大。

终极大 boss。 fastclick。上面的几种方法都是针对某些浏览器，或者某些浏览器的某些版本，或者会影响到我们平常使用方式的解决方案。使用起来不方便且考虑的细节很多，实践难度比较大。fastclick 作为一个终极的解决方案，使用方便，文件大小压缩后只有 3.3k。对于交互相对复杂的移动端web页面或应用是一个相对不错的解决方案。

    javascript:
    if ("addEventListener" in document) {
        document.addEventListener("DOMContentLoaded", function() {
            FastClick.attach(document.body);
        }, false);
    }
    jQuery:
    $(function() {
        FastClick.attach(document.body);
    });
    CommonJS:
    var attachFastClick = require("fastclick");
    attachFastClick(document.body);
    AMD:
    var FastClick = require("fastclick");
    FastClick.attach(document.body, options);

参考：

5-ways-prevent-300ms-click-delay-mobile-devices

pointerevents

GPU云服务器云服务器数学建模中的图像识别问题研究 webrtc解决直播延迟问题 webrtc音视频延迟问题 html点击图片移动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91202.html

移动前端 - 收藏集 - 掘金

摘要：使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。移动端实践前端掘金说起，相信大家并不陌生。 Sticky Footer，完美的绝对底部 - 前端 - 掘金写在前面做过网页开发的同学想必都遇到过这样尴尬的排版问题：在主体内容不足够多或者未完全加载出来之前，就会导致出现（图一）的这种情况，原因是因为...

Jochen 2019-08-29 12:43 评论0 收藏0
web前端 —— 移动端知识的一些总结

摘要：打个招聘广告杭州阿里巴巴招前端想去西溪的也可帮推荐，比较缺人，机会多多广告位长期有效，有兴趣简历我邮箱个人在移动端的一些总结归纳，有新的知识点会一直更新一部分用做动画时，变形尽量通过来实现，而不是用，等属性。不过的事件有一个事件穿透的问题。打个招聘广告：杭州阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@q...

Astrian 2019-08-28 18:19 评论0 收藏0
web前端 —— 移动端知识的一些总结

摘要：打个招聘广告杭州阿里巴巴招前端想去西溪的也可帮推荐，比较缺人，机会多多广告位长期有效，有兴趣简历我邮箱个人在移动端的一些总结归纳，有新的知识点会一直更新一部分用做动画时，变形尽量通过来实现，而不是用，等属性。不过的事件有一个事件穿透的问题。打个招聘广告：杭州阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@q...

BetaRabbit 2019-08-22 10:58 评论0 收藏0
移动端点击事件全攻略，这里的坑你知多少？

摘要：所以这种情况下是不符合点击事件的定义的。，关于移动端的点击事件总结完了，可能你都没想到一个简单的点击事件会有那么多坑，如果你在工作中可能会涉及到移动端开发的话，相信这篇文章还是值得你点赞和收藏的，毕竟是踩了那么多坑的经验总结。看标题的时候你可能会想，点击事件有什么好说的，还写一篇攻略？哈哈，如果你这么想，只能说明你too young to simple. 接触过移动端开发的同学可能都...

Nosee 2019-08-19 18:36 评论0 收藏0