前端工程师在开发移动端应用时，常常要处理点击事件或者手势操作。而在移动端中，用户交互感受的流畅性十分重要，因此我们需要使用更加优秀的移动端手势库。在这里，我向大家推荐一款非常好用的 npm 包——dd-tappable。
本篇文章，我们将详细介绍如何使用 dd-tappable，它的优点、使用方法，以及注意事项。首先，让我们来了解一下 dd-tappable 的优点。
dd-tappable 有什么优点？
dd-tappable 是一款基于 Hammer.js 封装的移动端手势库，具有以下优点。
1. 兼容性好
dd-tappable 可以兼容绝大多数移动端浏览器，并且基于 Hammer.js 封装，保证使用体验更佳。
2. 点透问题解决
dd-tappable 解决了移动端点击事件会穿透到下层元素的问题，从而提升了用户交互体验。
3. 操作简便
dd-tappable 提供了一个简单的 API 接口，可以方便地在项目中使用，并且可以通过参数设置定制化需求。
dd-tappable 如何使用？
安装
你可以使用 npm 安装 dd-tappable：
npm install dd-tappable --save
基本用法
在安装完 dd-tappable 后，就可以在需要使用的文件中引入，并调用 tap 函数绑定相应事件了：
-- -------------------- ---- -------
------ --- ---- --------------
------- -
------ ------------- -
-------------------
--
------------ ------------- -
-------------------------
--
------------ ------------- -
-------------------------
--
---------- ------------- -
-----------------------
-
---这样，我们就在相应元素上绑定了 tap 事件，你可以根据具体需求调用不同的回调函数。
支持参数
dd-tappable 提供了丰富的 API 接口，可以根据不同的需求进行参数设置。这里，我们介绍一些常用的参数：
time
time 参数用来设置 tap 事件的时间间隔，单位为毫秒。当两次 tap 事件的时间间隔小于 time 参数时，会触发 double tap 事件，默认为 300 毫秒。
-- -------------------- ---- -------
------- -
----- ---- -- ------- -----
------ ------------- -
-------------------
--
------------ ------------- -
-------------------------
-
---maxRotaion
maxRotation 参数用来设置手势旋转的最大角度。当两次手势旋转的角度差超过 maxRotation 时，会触发 rotate 事件，默认为 15 度。
tap(el, {
maxRotation: 10, // 设置旋转最大角度为 10 度
onRotate: function(evt) {
console.log('rotate');
}
});常见问题
在使用 dd-tappable 的过程中，可能会遇到一些常见问题，这里我将这些问题总结一下。
1. 点透问题
在移动端，点击事件经常会穿透到下层元素，导致用户体验不佳。dd-tappable 在内部做了很好的优化，可以解决这个问题。
2. 兼容性问题
dd-tappable 封装了 Hammer.js ， Hammer.js 是一个非常优秀的移动端手势库，可以对绝大多数移动端浏览器进行兼容。
示例代码
最后，给大家提供一些 使用 dd-tappable 的示例代码。你可以运行下面的代码示例来实现相应的交互效果。
<div id="demo"> <div class="inner"></div> </div>
-- -------------------- ---- ------- ----- - ------ ------ ------- ------ ------- ----- ----- ------- --- ----- ----- --------- --------- - ------ - ------ ----- ------- ----- ----------------- ----- --------- --------- ---- -- ----- -- -
-- -------------------- ---- -------
------ --- ---- --------------
----- -- - --------------------------------
------- -
----- ----
------------ ---
------ ------------- -
-------------------
--
------------ ------------- -
-------------------------
--
------------ ------------- -
-------------------------
--
---------- ------------- -
-----------------------
--
------------ ------------- -
-------------------------
--
------------- ------------- -
--------------------------
--
---------- ------------- -
-----------------------
--
------------ ------------- -
-------------------------
--
--------- ------------- -
----------------------
-
---结语
dd-tappable 是一款非常优秀的移动端手势库，可用于解决移动端交互问题，提升用户体验。在移动端开发中，十分值得推荐。希望本篇文章能够提供一些指导，让大家可以通过 dd-tappable 更加方便地开发移动端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eaf81e8991b448dc3e1