手机网页中手指触摸计算 --JQuery 获取touchstart,touchmove,touchend 坐标

SpiritLing

发布于 2023-01-05 09:16:45

1.2K0

发布于 2023-01-05 09:16:45

文章被收录于专栏：SpiritLing

　　JQuery写法

1 //手指开始触摸时，触发事件
2 $("#id").on('touchstart',function(e){
3 
4     var touch = e.originalEvent.targetTouches[0]; //取页面上第一个手指
5 
6    var x_ distance = touch.pageX; //获取手指在X轴上距最左边的距离
7 
8 })

三个函数：

touchstart --(手指放在页面时触发)
touchend --(手指离开页面时触发)
touchmove --(手指移动时触发)

获取手指第几个函数：

e.originalEvent.changedTouches[0] --(获取第一个手指,0->1)

获取距离(touch为获取手指的变量名)：

touch.pageX --获取手指在X轴上距最左边的距离
touch.pageY --获取手指在Y轴上距最上边的距离

　　原生写法

1 //原生写法
2 document.getElementById("id").addEventListener("touchstart",function(e){
3     var x=e.touches[0].pageX; //第一个手指距最左边距离
4     var y=e.touches[0].pageY; //第一个手指距最上边距离
5 })

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-05-20，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery