PhoneGap 中的点击和触摸手势

17 Mar 2025 | 阅读 2 分钟

在上一节中，我们学习了 hammer 库以及如何在 PhoneGap 中检测手势。在本节中，我们将学习点击和触摸手势。我们将更仔细地了解这些手势的工作原理。我们将使用之前的示例并在其中进行一些更改以实现点击和触摸手势。以下是开发点击和触摸手势应用程序所使用的步骤

1) 创建 index2.html

我们将创建一个新文件 index2.html，其中的代码与 index.html 中的代码相同。我们将在 index2.html 文件中进行更改，而不是在 index.html 中。

3) 获取手势 div

现在，我们将通过 id 获取手势 div 并创建 hammer manager 对象。hammer manager 对象没有任何预先保存的事件。所以，我们需要自己定义事件。

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

3) 添加事件

现在，我们将添加单击和双击事件，因为 hammer manager 对象没有任何预先保存的事件。我们将使用 hammer manager 的 add 函数并传递我们要添加的事件。我们将按以下方式添加事件

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

4) 附加两个事件

现在，我们将附加或协调这两个事件，因为当我们单击一次时，已经在事件中，除非我们让这两个事件协同工作，否则我们永远无法进行双击。我们将使用 hammer manager 的 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 开发人员应用或 Web 上运行我们的应用程序。

完整代码

<!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>

输出