2023-05-12 开启多语言插件支持……

手机触摸屏的JS事件

html5 苏 demo 2720℃ 0评论

处理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事件

1
2
3
4
5
6
7
8
9
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事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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) { 
        //上下滑动 
    
}

 

打赏

转载请注明:苏demo的别样人生 » 手机触摸屏的JS事件

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)