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

　　JQuery写法

---

代码语言：javascript复制

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轴上距最上边的距离

---

　　原生写法

代码语言：javascript复制

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

---

jquery touch 函数

0 人点赞