zoukankan      html  css  js  c++  java
  • html5的触摸事件

    1.触摸事件有哪些

    touchstart,touchmove,touchend

    2.分别什么时候触发

      touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。

      touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

      touchend事件:当手指从屏幕上离开的时候触发。

    3.每个事件中的touch对象如何获得

      touches:表示当前跟踪的触摸操作的touch对象的数组。

      targetTouches:特定于事件目标的Touch对象的数组。

      changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

    最好统一使用一个touch对象数组

    4.如何获得touch对象的相应属性

      clientX:触摸目标在视口中的x坐标。

      clientY:触摸目标在视口中的y坐标。

      identifier:标识触摸的唯一ID。

      pageX:触摸目标在页面中的x坐标。

      pageY:触摸目标在页面中的y坐标。

      screenX:触摸目标在屏幕中的x坐标。

      screenY:触摸目标在屏幕中的y坐标。

      target:触目的DOM节点目标。

    5.举例子

    function load (){
     
        document.addEventListener('touchstart',touch, false);
        document.addEventListener('touchmove',touch, false);
        document.addEventListener('touchend',touch, false);
         
        function touch (event){
            var event = event || window.event;
             
            var oInp = document.getElementById("inp");
     
            switch(event.type){
                case "touchstart":
                    oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                    break;
                case "touchend":
                    oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                    break;
                case "touchmove":
                    event.preventDefault();
                    oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                    break;
            }
             
        }
    }
    window.addEventListener('load',load, false);
    

      

  • 相关阅读:
    Cocos2d-x 3.0 lua规划 真正的现在Android在响应Home密钥和Back纽带
    SICP 练习 (2.9)解决摘要:宽度和区间运算的关系间隔
    编tuxedo遇到服务问题
    数据库关闭
    三维CAD塑造——基于所述基本数据结构一半欧拉操作模型
    采用proguard困惑android代码
    a中国天气网pi(json格式)
    android 内存优化
    如何获得最近的餐馆谁
    采购入库单已暂估生成凭证,当月后来又收到采购发票,结算后如何处理?
  • 原文地址:https://www.cnblogs.com/norm/p/6180773.html
Copyright © 2011-2022 走看看