简介
hifive-tap 是一款基于 zepto.js 实现的轻量级手势库，适用于移动端 web 开发。它支持 tap（点击）、double tap（双击）、long tap（长按）、swipe（滑动）等常用手势事件，并能用简单的 API 调用。
安装和引用
在项目目录下使用命令行安装：
--- ------- ---------- ------
然后在需要使用的页面中引入 zepto.js 和 hifive-tap.js：
------- -------------------------------- ------- -------------------------------------
基本使用
绑定 Tap 事件
------------------------------- - ------------------- -------------- ---
绑定双击事件
------------------------------------- - ------------------- -------------- ---
绑定长按事件
----------------------------------- - ------------------- -------------- ---
绑定滑动事件
--------------------------------- - ------------------- -------------- ---
高级使用
取消默认行为
hifive-tap 对于部分默认行为（如浏览器的滚动）会进行阻止。如果你想取消某些默认行为，可以在事件回调函数中返回 false。
------------------------------- - ------------------- -------------- -- ---------- ------ ------ ---
其他事件属性
hifive-tap 还提供了一些其他的事件属性，可以在事件回调函数中使用：
x、y：手指触摸时的 x、y 坐标；dx、dy：手指滑动距离的 x、y 坐标差；duration：手指触摸持续时间（长按事件和 swipe 事件有效）；touches：手指触碰到的元素数量（tap 事件和 long tap 事件有效）。
绑定多个事件
你可以在一个元素上绑定多个事件，如绑定 tap 和 swipe 事件：
------------------------------- - ------------------- -------------- ------------------- - ------------------- -------------- ---
事件委托
对于动态生成的元素，你可能需要使用事件委托的方式来绑定事件：
--------------------- -------------- ---------- - ------------------- -------------- ---
示例代码
--------- -----
------
------
----- ----------------
----------------- ------------
------- --------------------------------------------------------------------------
------- -------------------------------
-------
------
---- --------------- ------------- ------ ------- ------ ----------------- -------------
--------
------------ -
------------------------------- -
------------------- --------------
----------------------- -
------------------- --------------
--------------------- -
------------------- --------------
------------------- -
------------------- --------------
---
---
---------
-------
-------总结
hifive-tap 是一款优秀的手势库，它提供了多种常用手势事件，并能够轻松调用。本文简单介绍了它的安装和使用，同时还介绍了一些高级用法，如取消默认行为、其他事件属性、绑定多个事件和事件委托。它的实现也值得我们学习和探究。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65292