移动端触摸、点击事件优化(fastclick源码学习)
移动端触摸、点击事件优化(fastclick源码学习) 最近在做一些微信移动端的页面,在此记录关于移动端触摸和点击事件的学习优化过程,主要内容围绕fastclick展开。 fastclick github 问题起源 移动端浏览器一般在用户点击屏幕之后会延迟大约300ms才触发click event —— GOOGLE 手机打开此链接查看延迟demo (现在许多浏览器已经不存在延迟问题了,详见fastclick github,但笔者的手机浏览器还是出现了三百毫秒延迟的问题) 截图如下 为什么会300ms延迟呢,主要是有一个双击缩放功能,浏览器需要判断用户点击是否为双击缩放。这个问题不解决, 1、用户体验就会很差,很不流畅,尤其是在密集操作场景下,比如计算器,不解决300ms延迟问题,感觉反应很慢; 2、点击穿透问题 事件触发顺序 在了解fastclick的思路之前,我们先看一下事件触发顺序是怎样的 touchstart touchmove touchend mouseover :当指针设备移动到存在监听器的元素或其子元素的时候,mouseover事件就会被触发。 mouseenter:当指针设备( 通常指鼠标 )在元素上移动时, mousemove 事件被触发。 mousedown click 移动端click有300ms延迟问题,touch可没有哦。 fastclick思路