zoukankan      html  css  js  c++  java
  • 手机触摸屏的JS事件

    手机触摸屏的JS事件

    处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件:

    1
    2
    3
    4
    touchstart:  // 手指放到屏幕上的时候触发 
    touchmove:  // 手指在屏幕上移动的时候触发 
    touchend:  // 手指从屏幕上拿起的时候触发 
    touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详
    1
    2
    3
    4
    client / clientY:// 触摸点相对于浏览器窗口viewport的位置 
    pageX / pageY:// 触摸点相对于页面的位置 
    screenX /screenY:// 触摸点相对于屏幕的位置 
    identifier: // touch对象的unique ID

    http://blog.sina.com.cn/s/blog_65c2ec5e0101fexw.html

    处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件:
        1.touchstart:  // 手指放到屏幕上的时候触发 
        2.touchmove:  // 手指在屏幕上移动的时候触发 
        3.touchend:  // 手指从屏幕上拿起的时候触发 
        4touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详
    属性
        1.client / clientY:// 触摸点相对于浏览器窗口viewport的位置 
        2.pageX / pageY:// 触摸点相对于页面的位置 
        3.screenX /screenY:// 触摸点相对于屏幕的位置 
        4.identifier: // touch对象的unique ID 
    //touchstart事件  
    function touchSatrtFunc(e) {  
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
        var touch = e.touches[0]; //获取第一个触点  
        var x = Number(touch.pageX); //页面触点X坐标  
        var y = Number(touch.pageY); //页面触点Y坐标  
        //记录触点初始位置  
        startX = x;  
        startY = y;  
    }  
    //touchmove事件 
    function touchMoveFunc(e) {  
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
        var touch = evt.touches[0]; //获取第一个触点  
        var x = Number(touch.pageX); //页面触点X坐标  
        var y = Number(touch.pageY); //页面触点Y坐标  
        var text = 'TouchMove事件触发:(' + x + ', ' + y + ')';  
        //判断滑动方向  
        if (x - startX != 0) {  
            //左右滑动  
        }  
        if (y - startY != 0) {  
            //上下滑动  
        }  
    }  
  • 相关阅读:
    只打开一次浏览器,生成html测试报告<小紧张中......>
    hadoop学习第四天-Writable和WritableComparable序列化接口的使用&&MapReduce中传递javaBean的简单例子
    hadoop学习第三天-MapReduce介绍&&WordCount示例&&倒排索引示例
    hadoop学习第二天-了解HDFS的基本概念&&分布式集群的搭建&&HDFS基本命令的使用
    hadoop学习第一天-hadoop初步环境搭建&伪分布式计算配置(详细)
    大三了,写写博客
    方向问题
    第一天注册博客
    jquery跨域请求事例
    ECharts学习记录
  • 原文地址:https://www.cnblogs.com/webvision/p/3406930.html
Copyright © 2011-2022 走看看