logo图片
phoneGap教程

PhoneGap 触摸手势

PhoneGap中的点按和触摸手势

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

1) 创建 index2.html

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

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>
输出
点击和触摸手势PhoneGap
昵称: 邮箱:
Copyright © 2020 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4