移动端单击事件延迟的处理方法
date
Jun 24, 2019
slug
移动端单击事件延迟的处理方法
status
Published
tags
JavaScript
H5
事件
summary
type
Post
背景
现在的移动端基本都是触摸屏，体验和pc端浏览器有区别：移动端主要是手指触摸操作，pc端主要是鼠标点击操作。
理论上，手指触摸操作可以完全模拟鼠标的左键操作的。不过这里有个小插曲。
苹果公司在开发iphone上的safari时，为了体检，增加了一个双击放大的操作。但是在pc浏览器上，点击和双击不是独立的，双击的第一次操作是单击。 如果移动端也这么做的话，每次双击屏幕，都会先触发一次单击，会误使元素触发单击操作。 为了解决这个棘手的问题，苹果的解决方案是：点击后等待300ms，如果300ms内再次点击，就认为是双击，否则是单击。
这个就引发另外一个问题，单击操作响应会延迟300ms，这对要求极致体验的移动端来说，相当致命。
解决方案
- 禁止浏览器缩放功能
这个方案一般不推荐，因为需要浏览器支持，而且各系统兼容性不一样。
- 使用touch事件代替
使用这个方案有两个前提：
- 不需要兼容pc端，因为pc端没有touch事件
- 页面简单，不会出现层叠元素，单页应用的页面切换也算。 有层叠元素时，会出现点击穿透：点击之后，延迟300ms才会触发事件，这个时候，页面元素已经更新成另外一个元素了。 另外补充一下，jquery和zepto的tap事件也是基于touch事件封装的。
- 使用FastClick库 FastClick库也是使用touch事件封装的，不过它会在300ms之前，阻止默认事件，不会触发300ms之后的click。 FastClick在touchEnd的时候，在符合条件的情况下，主动触发了click事件，这样避免了浏览器默认的300毫秒等待判断。为了防止原生的click被触发，这里还通过event.preventDefault()屏蔽了原生的click事件。
这里的click事件是fastclick自己封装的，并且是在原始元素上触发。