PhoneGap中的点击和触摸手势

在上一节中，我们了解了锤子库以及如何在PhoneGap中检测手势。在本节中，我们将学习点击和触摸手势。我们将仔细研究这些手势的工作方式。我们将使用我们之前的示例，并在其中进行一些更改以用于点击和触摸手势。以下是用于开发点击和触摸手势应用程序的以下步骤：

1)创建index2.html

我们将使用与index.html中预设的代码相同的代码创建一个新文件index2.html 。我们稍后将在index2.html文件而不是index.html中进行更改。

3)获取手势div

现在，我们将使用id获取手势div并创建锤子管理器对象。锤管理器对象没有任何预保存的事件。因此，我们需要自己定义事件。

var myElement = document.getElementById('gestureDiv');
var mc = new Hammer.Manager(myElement);

3)添加事件

现在，由于锤子管理器对象没有任何预先保存的事件，因此我们将添加单击和双击事件。我们将使用锤子管理器的添加函数并传递要添加的事件。我们将通过以下方式添加事件：

//Events Hammer will detect
mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
mc.add(new Hammer.Tap({ event: 'singletap' }));

4)附加两个事件

现在，我们将彼此关联或协调这两个事件，因为当我们轻按一次已经发生的事件时，除非我们使这两个事件一起工作，否则我们将永远无法双击。我们将使用锤子管理器的get函数以以下方式附加两个事件：

//Make them work together
mc.get('doubletap').recognizeWith('singletap');
mc.get('singletap').requireFailure('doubletap');

5)检测事件

当我们单击单击或双击时，将调用匿名函数。在此函数，我们将通过以下方式将事件类型设置为结果div：

mc.on("singletap doubletap", function(ev){
        document.getElementById("resultDiv").innerHTML = ev.type;
})

现在，我们将使用本地主机在PhoneGap Developer App或Web上运行我们的应用程序。

完整的代码

输出量