5步解决移动设备上的300ms点击延迟

译者:jmouse

大多数基于触摸的浏览器设备,在点击时都会有个 300ms 的事件触发等待时间,做过 web app 开发的同学应该都遇到过这个情况,通过下面的5步可以轻松搞定这个延迟。

1、不要太纠结于此
是否能接受这 300ms
的时间延迟,往往取决于你的应用和目标受众,比如:如果是个内容为主,并且菜单较少的应用,那么用户在阅读上花费的事件远远大于在菜单上消耗的事件,这种
情况下 300ms 是完全可以接受的,并且没有 300ms
延迟的体验并不会好很多。分析你的应用判断是否需要解决这个不是问题的问题,在做正确抉择。

2、禁用缩放 (chrome 和 firefox)
在 chrome 和 firefox 的移动版本中,如果禁用了页面缩放,那么着 300ms 的延迟就会自动消失,具体代码如下:

<meta name="viewport" content="width=device-width, user-scalable=no">

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

但是这一方案在 safari 上并不起作用,还会降低有视觉或运动障碍用户的可访问性。

3、设置 viewport 的 device-width (chrome 32+)
在 chrome 32+ 中,如果设置了 viewport 的宽度小于或等于物理设备的宽度,那么也会达到禁用缩放的效果。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">

注意:这里的最大缩放比与上面meta中的值并不一致,这个是关键点。

4、使用指针事件 (IE10+)

微软已经针对触摸问题发布了具体的规范,例如:在你滚屏的时候 pointerup 事件并不会被触发。

这儿有一个非标准的 CSS 触摸 action 属性,它允许你移除特定元素或整个文档的触发延迟,而无需禁用缩放:

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

5、使用 touchend 事件处理
不同于 click 和 touchstart,touchend 没有这个 300ms 的延迟,而是即时触发,你完全可以在 WebGL 或 canvase 游戏中进行实践,但是在web 页面中单单使用 touchend 并不一定靠谱.

1、如果用户在两个不同元素之间触发了 touchstart 和touchend,那么 click 不会被触发 .

2、如果用户触发了 touchstart,但是在touchend之前是一个长长的 touchmove 滚动, 那么 click 也不会被触发.

3、在站点上任然应该保留 click 事件以兼容那些非触摸设备,这是你就要考虑事件的重复触发问题.

在此处输入内容已有同行为我们封装了部分解决方法:

1、FastClick 来至于FT实验室的一个插件,仅仅只有10kb,但是能解决上面的2-4步.

2、Tappy 来自于Filament Group,仅仅1kb,概念上类似于上面的指针事件.

问题:当你为多个元素进行这些事件绑定时,有可能出现性能的损耗.

是否有完美的解决方案呢?

是否需要解决 300ms
在于自己的判断,300ms被设计出来是有特定的用途,上面的meta属性中进行了设定,在chrome和firefox下能起作用,希望其他厂商也能尽
快提供这类支持。touch-action: manipulation
这个css属性能把风险降到最低,虽然现在只有微软支持,但是作为W3C规范和HTML5test的一部分,因此也许我们并不需要等待太久。

转自:http://www.jmouse.cn/?p=524

时间: 2024-11-06 23:49:29

5步解决移动设备上的300ms点击延迟的相关文章

移动浏览器Chrome 32 for Android去掉了300ms点击延迟

翻译一篇关于移动浏览器300ms延迟的有用文章,原文地址  http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away 去掉移动设备浏览器上的300ms点击延迟 你可以在网站上找到很多关于在为了快速流畅的网站用户体验,在某个地方减少10ms或90ms的文章.不幸的是,在基于触屏的跨平台移动浏览器上,触碰或点击一个物体时有一个人为的300ms延迟,即300ms后浏览器才认为是一个点击事件.当人们认为移动Web应用比原生应用慢时,这

移动端300ms点击延迟和点击穿透问题

一.移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果.在移动WEB兴起的初期,用户对300ms的延迟感觉不明显.但是,随着用户对交互体验的要求越来越高,现今,移动端300ms的点击延迟逐渐变得明显而无法忍受. 那么,移动端300ms的点击延迟是怎么来的呢? 问题由来 这要追溯至 2007 年初.苹果公司在发布首款 iPho

解决触摸屏设备click事件300ms的延迟的问题

从点击屏幕上的元素到触发元素的 click 事件,移动浏览器(触摸屏)会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作.300ms的等待时间,会让用户体验大大折损,fastclick.js库很好的解决了这个问题. 使用FastClick的时候,在需要使用的层上,实例化它.我们使用document.body是因为希望所有的按钮和链接都获得快速点击. 使用方法: window.addEventListener('load', funct

【前端开发】解决ios设备上fixed浮动的input输入框兼容问题

我们在开发移动端页面时,经常会存在这种需求,在页面顶部或底部有一个输入框,一直浮动在顶部或底部位置,中间部分的内容是可以滚动的.比如底部输入框的搜索功能,或底部输入框的写评论功能. 这种问题,我们一般会使用的方法是一个position:fixed;的div,在里面放一个input,浮动在顶部或底部,其他的内容可以滚动. 这种方法在安卓设备中肯定是没问题的.但是在ios设备中就会有问题了. 问题1:滚动页面内容部分时,浮动部分可能会消失,滚动结束后才展示出来 问题2:点击输入框进行输入时,呼出键盘

iOS UITableViewCell上 取消button点击延迟

这个现象在高亮状态时最为明显 连续触碰button 高亮状态会不显示. 处理方案是关掉scrollView的延迟 代码: 在创建tableView的地方加下面这行 _tableView.delaysContentTouches =NO; 在tableView代理方法 cellForRow 里加入下面代码 for (UIView *currentViewin cell.subviews) { if([currentView isKindOfClass:[UIScrollViewclass]]) {

移动浏览器Chrome 32 for Android移除300ms点击推迟

在手机浏览器的一篇文章翻译300ms延迟实用文章,原文地址  http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away 去掉移动设备浏览器上的300ms点击延迟 你能够在站点上找到非常多关于在为了高速流畅的站点用户体验.在某个地方降低10ms或90ms的文章.不幸的是.在基于触屏的跨平台移动浏览器上,触碰或点击一个物体时有一个人为的300ms延迟,即300ms后浏览器才觉得是一个点击事件.当人们觉得移动Web应用比原生应用慢时

fastclick.js解决移动端(ipad)点击事件反应慢问题

参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 上班做项目的时候碰到一个移动端项目,其中有个小游戏,相当于天上掉馅饼,用户需要点击馅饼获得.游戏做好之后在pc端测试是没问题的,安卓手机上测试也是没问题的,但是部分苹果手机就出现了问题,用户点击馅饼没有反应. 后来调试的时候,我让这些馅饼静止在屏幕上,这些苹果手机用户就可以点击了.才发现是因为点击

移动端300ms的点击延迟以及解决方案

[今天做在移动端的一些效果时,我选择使用动画而不是用过渡,这个300ms的点击延迟是我为什么使用动画而不使用过渡最主要的一个原因] 动画和过渡 共同点:都是css控制DOM运动, 不同点: 1.过渡:只有两个关键帧,开始和结束: 2.动画可以设置多个关键帧 3.过渡必须通过事件去触发 4.动画不需要打开即可运动 [CSS执行速度更快,js事件触发执行,手机端点击类事件则会遇上300ms点击延迟,用户体验更差] 一.移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击

在android移动设备上登录gmail的时候报password错误解决方法!!!!

今天刚发现的解决的方法:就是登录web端的gmail,查看收件箱应该有no-reply这一帐户给你发过邮件(假设没有,你在移动设备上登录一下gmail).照着邮件里的说明去做,就是生成一个专门应用的password.然后用此password在android移动设备上登录gmail就能够了.我的是这么解决的.