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);
    

      

  • 相关阅读:
    Request Validation in ASP.NET
    ANSI、Unicode、Unicode big endian、UTF8编码
    在win7下安装SQL sever2005
    配置SQL Server 2005 以允许远程连接
    传统网站与Web标准——DIV+CSS布局实例
    打造自己的reset.css
    传统网站与Web标准——表格布局实例
    每天工作4小时的程序员
    良好的XHTML规则
    列表导航栏实例(02)——精美电子商务网站赏析
  • 原文地址:https://www.cnblogs.com/norm/p/6180773.html
Copyright © 2011-2022 走看看