Tizen触摸事件版本 1： 控制触摸事件

密西西比河

相关信息

• 触摸事件版本1的向导
• 触摸事件为移动网络版本1的API
• 触摸事件为可穿戴WEB版本1的API
  

本教程演示了如何使用Tizen触摸事件。

热身

熟悉触摸事件版本1 API通过学习基本知识:

处理触摸事件定义一个元素触发触摸事件和应对事件的事件处理程序。
检索事件发生检索移动触摸事件的位置。
控制多点触摸处理多个并发触摸事件。
任务在移动应用程序

在 接触油漆任务,我们将穿过画一个简单的图像通过使用触摸事件和画布元素。

任务在可穿戴应用程序

在 接触油漆任务,我们将穿过画一个简单的图像通过使用触摸事件和画布元素。

后续

一旦我们学会了基本的触摸事件版本1 API,我们现在可以转移到更高级的任务,包括:

加强触摸响应能力加强触摸响应能力来提高性能。

• 显示所有
• 隐藏所有
  

• 处理触摸事件隐藏
  
  
  学习如何处理触摸事件提高了应用程序的用户交互:
  
  
  • 定义你想要的元素触发触摸事件。 在这种情况下,一个区域一个文本和图像被定义为一个元素。
    1. <div id="touchable">
       
    2.    Touch or drag this box with one finger.
       
    3.    <img src="https://www.tizen.org/sites/all/themes/tizen_theme/logo.png" alt="Tizen logo">
       
    4. </div>
       
    5. <div id="log"></div>

    复制代码
    
    
  • 为定义的元素添加事件处理程序:
    1. <script>
       
    2.    var log = document.querySelector("log");
       
    3.    var touchable = document.querySelector("touchable");
       
    4. 
       
    5.    /* touchstart event */
       
    6.    touchable.addEventListener("touchstart", function(e)
       
    7.    {
       
    8.       log.innerHTML = "<p>Touch Event: touchstart</p>";
       
    9.    }, false);
       
    10.    
        
    11.    /* touchend event */
        
    12.    touchable.addEventListener("touchend", function(e)
        
    13.    {
        
    14.       log.innerHTML += "<p>Touch Event: touchend</p>";
        
    15.    }, false);
        
    16.    
        
    17.    /* touchmove event */
        
    18.    touchable.addEventListener("touchmove", function(e)
        
    19.    {
        
    20.       log.innerHTML += "<p>Touch Event: touchmove</p>";
        
    21.    }, false);
        
    22.    
        
    23.    /* touchcancel event */
        
    24.    touchable.addEventListener("touchcancel", function(e)
        
    25.    {
        
    26.       log.innerHTML += "<p>Touch Event: touchcancel</p>";
        
    27.    }, false);
        
    28. </script>

    复制代码
    根据接触类型、不同的触摸事件发生:
    
    
    • 当用户触摸的元素, touchstart和 touchend事件发生。
      
      图:简单的触摸(仅在移动应用程序中)
      当用户把他们的手指在元素,然后将他们的手指,touchstart,touchmove,touchend事件发生。
      图:移动触摸(仅在移动应用程序中)
      当用户长按DOM元素,比如文本或图像,在元素touchstart
      

      和

      touchcancel

      事件发生。
      图:取消联系长按(仅在移动应用程序中)
      注意:

      自设备可以通过触摸屏幕输入发生,有时应用程序的功能和浏览器可以同时回应相同的触摸事件。 为了防止意想不到的影响(例如,定制的姿态和浏览器滚动操作同时),使用

      preventDefault ()

      方法以防止浏览器的基本事件:
      1. <script>
         
      2.    touchable.addEventListener("touchmove", function(e)
         
      3.    {
         
      4.       if (event.touches.length >= 1)
         
      5.       {
         
      6.          log.innerHTML += "<p>Touch Event: touchmove</p>";
         
      7.          e.preventDefault(); /* Prevent default scroll action */
         
      8.       }
         
      9.    }, false);
         
      10. </script>

      复制代码
      
      
      • 源代码这个用例相关的完整源代码,看到下面的文件:
        touch_event_types.html
        

检索事件发生隐藏

学习如何检索触摸事件的坐标点发生改善应用程序的用户交互:

• 定义你想要的元素触发触摸事件。 在这种情况下,一个地区一个文本定义为一个元素。
  1. <div id="touchable">
     
  2.    Touch and move this box with one finger.
     
  3. </div>
     
  4. <div id="log"></div>

  复制代码
  2.添加一个事件侦听器和处理程序 touchmove事件定义的元素:
  1. <script>
     
  2.    var log = document.getElementById("log");
     
  3.    var touchable = document.getElementById("touchable");
     
  4. 
     
  5.    /* touchmove event */
     
  6.    touchable.addEventListener("touchmove", phaseCalcul, false);
     
  7.    
     
  8.    function phaseCalcul(e)
     
  9.    {
     
  10.       var pTarget = e.touches.item(0);
      
  11.    
      
  12.       log.innerHTML =
      
  13.          '<strong>pageX:</strong> ' + pTarget.pageX +
      
  14.          '<br><strong>pageY:</strong> ' + pTarget.pageY +
      
  15.          '<br><strong>clientX:</strong> ' + pTarget.clientX +
      
  16.          '<br><strong>clientY:</strong> ' + pTarget.clientY +
      
  17.          '<br><strong>screenX:</strong> ' + pTarget.screenX +
      
  18.          '<br><strong>screenY:</strong> ' + pTarget.screenY;
      
  19.    
      
  20.       e.preventDefault();
      
  21.    }
      
  22. </script>

  复制代码
  
  

• 2.每一次 touchmove 事件被触发时,触点的位置更新。 的位置在2 d坐标返回页面,客户端,和屏幕。 您可以使用比较坐标的位置 touchstart和 touchend事件,分析用户使用顺向的姿态 touchmove 事件确定运动方向。
  

源代码

这个用例相关的完整源代码,看到下面的文件:

• event_handling_prevent_default.html
  

控制多点触摸隐藏

学习如何控制多个并发的触摸事件提高了应用程序的用户交互:

• 定义你想要的元素触发触摸事件。 在这种情况下,一个地区一个文本定义为一个元素。
  1. <div id="touchable"> Touch this box with two finger. </div>

  复制代码
  
  
• 添加一个事件侦听器和处理程序 touchstart事件定义的元素:
  1. <script>
     
  2.    var touchable = document.getElementById("touchable");
     
  3.    
     
  4.    /* touchstart event */
     
  5.    touchable.addEventListener("touchstart", touchStartHandler, false);
     
  6.    
     
  7.    function touchStartHandler(e)
     
  8.    {
     
  9.       /* Return if there is no multi-point touch */
     
  10.       if (e.touches.length < 2) return;
      
  11. 
      
  12.       var width = Math.abs(e.touches.item(0).clientX - e.touches.item(1).clientX);        
      
  13.       var height = Math.abs(e.touches.item(0).clientY - e.touches.item(1).clientY);
      
  14.         
      
  15.       /* Create a new image object instance */
      
  16.       var tizenLogo = document.createElement("img");                    
      
  17.       tizenLogo.setAttribute("src", "sample_image.png");
      
  18.       tizenLogo.setAttribute("width", width);
      
  19.       tizenLogo.setAttribute("height", height);
      
  20.       tizenLogo.style.position = "absolute";
      
  21.         
      
  22.       /* Assign the position where the image is shown based on the touch point */
      
  23.       tizenLogo.style.left = (e.touches.item(0).pageX + e.touches.item(1).pageX - width) / 2 + "px";
      
  24.       tizenLogo.style.top = (e.touches.item(0).pageY + e.touches.item(1).pageY - height) / 2 + "px";
      
  25.         
      
  26.       this.appendChild(tizenLogo);
      
  27.    }   
      
  28. </script>

  复制代码
  
  

• 3.当触摸事件被触发时,它的细节,比如事件坐标,身份证号码,联系的主题,存储在 联系接口的实例。 访问细节 touches.item()方法可以用在一个数组的格式。
  多点触摸事件是指其他实例被推到 touches.item(index)数组中。 例如,第一个触摸事件被推 touches.item(0),如果第二个触摸事件触发没有删除第一个手指从屏幕上,第二个事件被推 touches.item(1)。
  

源代码

这个用例相关的完整源代码,看到下面的文件:

• multi_touch.html
  

加强触摸响应能力隐藏

避免延误单一利用姿态,可以使页面不能攀登的,或修改触摸反应:

• 页面不能攀登的:
  如果一个页面不能攀登的,手势是手势缩放不需要,所以单一利用手势可以及时处理。 页面不能攀登的,使用 viewport meta标签:
  
  1. <meta name="viewport"
     
  2.       content="width=device-width, initial-scale=1.0, minimum-scale=1.0,
     
  3.                maximum-scale=1.0, user-scalable=0">

  复制代码
  修改接触反应事件发生时立即当碰触点被释放,使其速度比水龙头事件。 然而,事件发生时即使碰触点移动之前释放。
  
  • 为了避免处理手势触摸点移动时,检查是否感动的一点是通过设置一个标志的移动 touchmove () 事件处理程序:
    1. <a id="test" href="#">Click test using touch event</a>
       
    2. <div id="log"></div>
       
    3. <script>
       
    4.    var moved = false;
       
    5. 
       
    6.    $('#test').on('touchstart', function(e)
       
    7.    {
       
    8.       moved = false;
       
    9.    });
       
    10. 
        
    11.    $('#test').on('touchmove', function(e)
        
    12.    {
        
    13.       moved = true;
        
    14.    });
        
    15. 
        
    16.    $('#test').on('touchend', function(e)
        
    17.    {
        
    18.       if (!moved)
        
    19.          $('#log').innerHTML = "Test link is clicked!";
        
    20. 
        
    21.       return false;
        
    22.    });
        
    23. </script>

    复制代码
    
    

• 为了避免激活点击事件后触摸事件,设置返回类型 false。
• 你也可以使用 vclick 由 jQuery 移动提供的事件 vclick 事件是基于触摸事件和生成仅当感动的点不移。
  1. <a id="test" href="#">Click test using touch event</a>
     
  2. <div id="log"></div>
     
  3. <script>
     
  4.    $('#test').on('vclick', function(e)
     
  5.    {
     
  6.       $('#log').html("Test link is clicked!");
     
  7. 
     
  8.       return false;
     
  9.    });
     
  10. </script>

  复制代码