首页 > 移动平台 > 详细

JS事件监听手机屏幕触摸事件 Touch

时间:2014-03-30 08:45:54      阅读:571      评论:0      收藏:0      [点我收藏+]

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

touchstart:  // 手指放到屏幕上的时候触发 
touchmove:  // 手指在屏幕上移动的时候触发 
touchend:  // 手指从屏幕上拿起的时候触发 
touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详

事件属性一般通过event.changedTouches获得

client / clientY:// 触摸点相对于浏览器窗口viewport的位置 
pageX / pageY:// 触摸点相对于页面的位置 
screenX /screenY://触摸点相对于屏幕的位置 
identifier: // touch对象的unique ID

 简单实现

bubuko.com,布布扣
var startX=startY=0;
function touchSatrtFunc(e) {  
    e.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) {  
    e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
        var touch = e.touches[0];
        var x = touch.pageX - startX,
            y = touch.pageY - startY;
        var text = ‘Move:(‘ + (x) + ‘, ‘ + y + ‘)‘;  
        document.title = text;
}  

//touchend事件 
function ToucheEndFunc(e) {  
    e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
    var touch = e.changedTouches[0]; //获取第一个触点  

    var x = touch.pageX; //页面触点X坐标      
    var y = Number(touch.pageY); //页面触点Y坐标  
    var text = ‘end:(‘ + x + ‘, ‘ + y + ‘)‘;  
    document.title = text;
}
bubuko.com,布布扣

JS事件监听手机屏幕触摸事件 Touch,布布扣,bubuko.com

JS事件监听手机屏幕触摸事件 Touch

原文:http://www.cnblogs.com/suone/p/3633410.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!