fastclick使用与解密

  • 什么是 fastclick
  • 为什么要使用 fastclick
    • 1、直接去掉延迟
    • 2、缓和修复
  • 如何使用 fastclick
  • 什么时候不使用它

什么是 fastclick

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.

fastclick,消除点击延时提高程序的运行效率。

为什么要使用 fastclick

According to Google:

…mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

众所周知,移动端在处理点击事件的时候,会有300毫秒的延迟。恰恰是这300毫秒的延迟,会让人有一种卡顿的体验。

这300毫秒的原因,在于早期浏览器的实现中,浏览器不知道用户触摸后,到底想做什么,所以故意等待300毫秒,再触发click事件。

既然我们已经知道了原因了,怎么解决呢?

1、直接去掉延迟

因为浏览器对 click 事件的处理,有 300ms 的延迟,而 touchstart 几乎是立即执行的,估将所有 click 事件的监听,改为 touchstart 事件的监听,即可消除这 300ms 的延迟。

但这样副作用也很大,移动端的交互体验全靠触摸,touchstart 将会干扰其他交互行为的处理,例如滚动、拖拽等。

2、缓和修复

使用 fastclick.

如何使用 fastclick

既然浏览器有这 300ms 的延迟,那么我们来代替浏览器判断,手动触发 click 事件,这也是 fastClick 的解决方案。

1、引入插件的 JavaScript 文件到你的 HTML 网页中:


                    
                    

你可能感兴趣的:(前端)