1、移动web页面上click事件响应有300ms延迟
原因：移动设备访问的web页面都是PC上的页面。在默认viewport（980px）的页面往往需要“双击”或“捏开”放大页面。而正是为了确认用户是“双击”还是“单击”。
safari 需要300ms 的延迟来判断。而后来的iphone,android也沿用这样的设计。
举例：如果你点击一下，在300ms内再点击第二次就认为是双击事件。
1.1） 如何解决？
利用tap事件代替click
自定义tap事件原理：
在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手机位置为同一位置（或允许移动一个非常熊德位移值）且时间间隔较短（一般认为是200ms）
过程中未曾触发过touchmove。即可认为触发了手持设备上的“click”,一般称它为“tap”.(一般使用zepto.js框架)
1.2）问题： Tap “点透”的bug;描述： 点击按钮最上面的蒙层，但是蒙层下的按钮也会触发。
点透发生过程： touchstart , touchend蒙层消失， 此时由于300ms导致下面的click触发
关于tap 穿透的解决方案：
①使用缓动动画，过渡300ms的延迟。
② 中间层dom元素的加入，让中间接受这个“穿透”事件
③ “上下”都使用tap事件，原理上解决tap 透传事件（但不可避免原生标签的click事件）
④ 改用fastclick的库（听过最新的zepto已经fixed掉这个bug）
2、tap事件为自定义事件，基于touch基础事件。
2.1）触摸才是移动设备的交互核心事件。
touchstart: 手指触摸屏幕触发（已经有手指放屏幕上不会触发）
touchmove： 手指在屏幕上滑动，连续触发
touchend: 手指离开屏幕时触发
touchcancel:系统取消touch时候触发（不常用）
2.2）除了常见的事件属性外，触摸事件包含专有的触摸属性。
touches: 跟踪触摸操作的touch对象数组。
targetTouches: 特定事件目标的touch对象数组；
changeTouches: 上次触摸改变的touch 对象数组
2.3）每个touch对象包含属性--根据touch对象跟踪触摸具体位置，从而判断触摸交互或手势事件
clientX: 触摸目标在视口中的X坐标，clientY
pageX: 触摸目标在页面中的X坐标（包含滚动），pageY
screenX：触摸目标在屏幕中的X坐标，screenY
target: 触摸的DOM节点目标
identifier: 标识触摸的唯一ID
2.4) Android 4.0,4.1，4.4只会触发一次touchstart,一次touchmove,touchend不触发
解决方案： 在touchmove中加入：event.preventDefault()---------touchmove多次触发，touchend 结束触发
导致问题： 默认行为不发生，如：scroll,导致页面不滚动
2.5）常用touch相关的交互效果
① 弹性滚动
当客户端的页面滚动到顶部或底部时候，滚动条会收缩并让我们多滑动一定距离。通过缓冲反弹的效果，带给用户良好的体验。
但滚动有几种情况：
1、body层滚动：自带弹性滚动，overflow: hidden 失效，gif和定时器暂停
2、局部滚动：没有弹性滚动，没有滚动惯性，不流畅
如何开启？ body { overflow： scroll；-webkit-overflow-scrolling: touch; }
注意： Android不支持原生的弹性滚动，但是可以借助第三方库iScroll来实现
② 下拉刷新
③ 上拉加载：使用scroll事件，而不是touch事件
原文地址：https://www.cnblogs.com/sunqq/p/8323809.html