检测手势

手势技术允许我们无需触摸屏幕即可与设备进行交互。PhoneGap 本身并不支持手势。为此，我们将使用 Hammer min 和 time JavaScript 库，因为它是创建移动应用程序最重要的部分之一。这里有两个问题，即 JavaScript 是为浏览器构建的。Hammer 库提供了手势，而 Hammer time 库则提供了实际的库。现在，我们将安装这些库。我们将使用以下步骤来设置并在我们的应用程序中添加 hammer 库

1) 创建一个新项目

首先，我们将使用空白模板创建一个新的 PhoneGap 项目。如果您不知道如何使用空白模板创建应用程序，请阅读 PhoneGap 项目链接。

2) 下载 hammer.js 文件

现在，我们将访问 http://hammerjs.github.io/ 链接并单击 Hammer.min.js 选项。单击此选项将打开 hammer.min.js 文件的代码。我们将复制完整的代码并将其粘贴到我们合适的编辑器中。之后，我们将它保存到我们应用程序的 www 文件夹中，命名为 hammer.js。

3) 下载 hammer-time.js 文件

现在，我们将从 http://hammerjs.github.io/dist/hammer-time.min.js 链接复制 hammer-time.js 文件的内容。我们将粘贴它并将其保存为 hammertime 并添加 JavaScript 扩展名。我们还将它保存到我们应用程序的 www 文件夹中。

4) 在我们的 index.html 文件中添加 hammer 和 hammer-time

现在，我们将在我们的 index.html 文件中添加这两个库。我们将使用 <script></script> 标签 并使用它的 src 属性来在该文件中添加这两个库。我们将以下列方式使用 <script></script> 标签

5) 创建UI

现在，我们将为手势创建一个用户界面。我们将创建两个 <div></dvi> 标签，即一个用于手势，一个用于结果。之后，我们将在 body 部分添加脚本。这将扮演与 window.onload 函数相同的作用。在此脚本中，我们将获取执行手势的元素，并在该元素的正下方创建一个新的 hammer 对象。

现在，我们将编写一个语句来获取结果并显示结果。完整的 body 部分将按以下方式编码

6) 更改 gestureDiv 的样式

现在，我们将使用 <style></style> 标签 更改 gestureDiv 的样式。我们将宽度设置为 300 像素，高度设置为 400 像素，背景颜色设置为红色，边框设置为 1 像素的实线黑色。我们还将为我们的应用程序添加一个标题。

现在，我们准备好在我们的 PhoneGap Developer App 中运行我们的项目了。

完整代码

输出