简介
现今，前端开发过程中，使用 jQuery 框架的应用越来越广泛。而在移动端应用中，用户交互很重要。Hammer.js 是一款基于 JavaScript 开发的流行且易用的移动端触屏手势库。如果要在 jQuery 应用中使用 Hammer.js，可以使用 jQuery 插件 jquery-hammerjs。
本文将详细介绍如何使用 jquery-hammerjs，假设你的项目已经安装 jQuery 和 Hammer.js 库。
安装
要使用 jquery-hammerjs，你需要先安装这个插件。可以使用 npm 命令行工具，运行以下命令：
--- ------- ---------------
然后在你的 HTML 文件中引入 jquery-hammerjs：
------- -------------------------------------------------------------
请注意，需要先引入 jQuery 和 Hammer.js 库。
使用
使用 jquery-hammerjs，你可以将 Hammer.js 基本的手势事件与 jQuery 事件绑定。下面是一个例子，展示了如何在 HTML 内容上使用 jquery-hammerjs：
--------- -----
----- ----------
------
----- ----------------
------------- -------- ----------------
------- --------------------------------------------------
------- -----------------------------------------------
------- -------------------------------------------------------------
-------
------ -
------ ------
------- ------
----------------- -----
-
--------
-------
------
---- -----------------
--------
-------------------------------- -----------
---------------
---
---------
-------
-------在这个例子中，我们为 #myDiv 元素绑定了 Hammer.js 的 swipe 事件，当用户进行滑动的时候，将触发 alert 事件。
同样，我们可以使用 jQuery 事件，绑定 Hammer.js 的事件作为它的回调函数：
--------- -----
----- ----------
------
----- ----------------
------------- -------- ----------------
------- --------------------------------------------------
------- -----------------------------------------------
------- -------------------------------------------------------------
-------
------ -
------ ------
------- ------
----------------- -----
-
--------
-------
------
---- -----------------
--------
--- ----- - ------------
-------------------------- -----------
-------------------- --------- -----
---
---------
-------
-------在这个例子中，我们使用了 jQuery 的 animate 方法，将 myDiv 从左向右移动了 100 像素，时间为 500 毫秒。
在 jquery-hammerjs 中，可以绑定 Hammer.js 所有类型的事件，如 pan，swipe 和 pinch。你可以根据你的需求和情况，自由使用。
总结
本文中，我们学习了如何使用 jquery-hammerjs 在 jQuery 应用中使用 Hammer.js。我们了解了如何让基本的手势事件与 jQuery 事件绑定，如何使用 jQuery 事件作为 Hammer.js 事件的回调。希望这篇文章对您有所帮助，并可以在您今后的工作中有所应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/57731