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. 双击