JavaScript for Mobile

Touch Events

触摸事件(touch events)

touchstart: 手指放到屏幕上的时候触发

touchmove: 手指在屏幕上移动的时候触发

touchend: 手指从屏幕上拿起的时候触发

touchcancel: 系统取消touch事件的时候触发。

更多:从 event 中获取更多信息(touches)

然而 JS 没有滑动事件

手机上Click延迟300ms

300 毫秒点击延迟的来龙去脉

早期 iPhone 双击缩放

浏览 PC 页面时,默认缩小展示;(使用 980 像素的视窗宽度)

用手指在屏幕上快速点击两次,iOS Safari 才会将网页缩放至适合比例。

这和 300 毫秒延迟有什么联系呢?

用户在 iOS Safari 里边点击了一个链接。

当用户一次点击屏幕之后

浏览器:要打开这个链接?还是想要进行双击操作?等 300 ms 再判断。

用户没有再次点击:打开链接;

用户第二次点击:双击缩放。

解决方案一

禁止缩放

不让用户缩放

给出合适的缩放比例

缺点:无法缩放

解决方案二

Chrome 32 对包含width=device-width或者更小的值的页面上禁用双击缩放。

没有双击缩放就没有 300 毫秒点击延迟。

解决方案三

CSS touch-action属性

a[href],button{

-ms-touch-action:none;/* IE10 */

touch-action:none;/* IE11 */

}

touch-action的默认值为auto,将其置为none即可移除目标元素的 300 毫秒延迟。

上面的代码在 IE10 和 IE11 上移除了所有链接和按钮元素的点击延迟

不对JS操作有反应,只针对CSS

解决方案四

Fastclick

FastClick在检测到touchend事件的时候,会通过DOM自定义事件立即触发一个模拟click事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。

调用的两种方式

//纯js

if('addEventListener'indocument){

document.addEventListener('DOMContentLoaded',function(){

FastClick.attach(document.body);

},false);

}

//jQuery调用

$(function(){

FastClick.attach(document.body);

});

300 毫秒点击延迟的来龙去脉

思考

为什么 JS 双击事件没有遇到 300ms 的问题?

在双击的时候同时发生了两件事:

1. 放大

2. 双击

推荐阅读更多精彩内容