随着移动设备的普及，前端开发人员越来越需要关注移动设备上的性能问题。其中，移动设备上的点击事件延迟和300ms点击延迟问题一度令众多开发人员头痛不已。而 wp-fastclick npm 包就是一个解决这个问题的好选择。
什么是 wp-fastclick
wp-fastclick 是基于 fastclick 的轻量级快速点击库，可以有效地解决移动设备上的点击延迟问题。wp-fastclick 使用了类似于 native click 的策略，将 click 事件绑定到 touchstart 或 touchend 事件上，实现了快速点击的效果。
如何使用 wp-fastclick
安装 wp-fastclick
可以使用 npm 安装 wp-fastclick：
npm install wp-fastclick --save
引入 wp-fastclick
在需要使用 wp-fastclick 的页面中引入 wp-fastclick：
import FastClick from 'wp-fastclick'
初始化 wp-fastclick
在组件的 mounted 钩子函数中初始化 wp-fastclick：
mounted () {
FastClick.attach(document.body)
}或者在在调用之前为所有元素都初始化：
FastClick.prototype.focus = (targetElement) => {
targetElement.focus()
}
FastClick.attach(document.body)wp-fastclick 回调函数
由于 wp-fastclick 是绑定 touchstart 或 touchend 事件，所以继承了 touch 事件的特性，可能会有 touchcancel 发生，wp-fastclick 提供了相应的回调函数。
const fc = FastClick(document.getElementById('clickable-element'))
fc.on('touchstart', () => console.log('touchstart'))
fc.on('touchend', () => console.log('touchend'))
fc.on('touchcancel', () => console.log('touchcancel'))示例代码
-- -------------------- ---- -------
----------
-----
------- ----------- -- ---
-----------
-----------
---------------------
-- ---- --
---------
------
-----------
--------
------ --------- ---- --------------
------ ------- -
------- -- -
-------------------------------
--
-------- -
----------- -- -
------------------- ---------
-
-
-
---------
------ -------
---- -
------- -----
-------- -----
----------------- -----
------- -----
-------------- ----
-
--------总结
在移动端开发中，使用 wp-fastclick 可以有效地解决点击延迟以及300ms点击延迟问题，提升用户体验。同时，必须注意 WP-quickclick 在一些场景下可能会出问题，例如在弹框中使用时，需要进行特殊处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671158dd3466f61ffe652