移动端浏览器的默认显示宽度是980px(不一样机型各异,但相差不大),而不是屏幕的宽度(320px或其余)。为了对早期普通网页更好的体验,iphone设计了双击放大显示的功能--这就是300ms延迟的来源:若是用户一次点击后300ms内没有其余操做,则认为是个单击行为;不然为双击放大行为。css
假设有两个层级,A和B;A在上面,B在下面。 若是A监听touch事件(zepto的tap事件),并且B上有个连接(或者监听click事件),那么当touch A后,前后触发了touchStart和touchEnd事件,touchEnd后A层隐藏,而此刻会触发在document最前面B的click事件;这就是点透行为。html
user-scalable=no
。 不能缩放就不会有双击缩放操做,所以click事件也就没了300ms延迟,这个是Chrome首先在Android中提出的。width=device-width
。Chrome 开发团队不久前宣布,在 Chrome 32 这一版中,他们将在包含 width=device-width 或者置为比 viewport 值更小的页面上禁用双击缩放。固然,没有双击缩放就没有 300 毫秒点击延迟。touch-action:none
,根据规范,touch-action 属性决定
鉴于上述的3种解决方案,如今较为通用的meta设置为:git
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 复制代码
上述的3种解决方案能够解决Chrome Android和IE10+下的300ms问题,可是对其余浏览器还须要特定的解决方案。github
现阶段FastClick被更多使用,借助它经过监听click事件,便可消除300ms的问题。
经过阅读源码可知:浏览器
ontouchstart
事件的浏览器user-scalable="no"
clickEvent = document.createEvent('MouseEvents'); initMouseEvent; dispatchEvent
手动触发click事件。