PhoneGap 触摸手势
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 开发者应用程序或使用本地主机的网络上运行我们的应用程序。
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<meta name = "viewport" content = "initial-scale = 1, maximum-scale = 1, user-scalable = no, width = device-width" >
<script src = "hammer.js" ></script>
<script src = "hammertime.js" ></script>
<style>
#gestureDiv
{
width : 300px;
height : 400px;
background-color : red;
border : 1px solid black;
}
</style>
<title> Gesture Example </title>
</head>
<body>
<div id = "gestureDiv" ></div>
<div id = "resultDiv" ></div>
<script type = "text/javascript" src = "cordova.js" ></script>
<script>
var myElement = document.getElementById('gestureDiv');
var mc = new Hammer.Manager(myElement);
//Events Hammer will detect
mc.add(new Hammer.Tap({event : 'doubletap', taps : 2}));
mc.add(new Hammer.Tap({event : 'singletap'}));
//Make them work together
mc.get('doubletap').recognizeWith('singletap');
mc.get('singletap').requireFailure('doubletap');
mc.on("singletap doubletap", function(ev){
document.getElementById("resultDiv").innerHTML = ev.type;
})
</script>
</body>
</html>
输出
