手机触摸屏的JS事件

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

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

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

每个Touch对象包含下列属性。

clientX:触摸目标在视口中的X坐标。
    clientY:触摸目标在视口中的Y坐标。
    identifier：表示触摸的唯一ID。
    pageX：触摸目标在页面中的x坐标。
    pageY：触摸目标在页面中的y坐标。
    screenX:触摸目标在屏幕中的x坐标。
    screenY:触摸目标在屏幕中的y坐标。
    target:触摸的DOM节点坐标。

//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) {

//上下滑动

}

巴特西

手机触摸屏的JS事件

最新文章

热门文章