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

　　JQuery写法

---

//手指开始触摸时，触发事件
$("#id").on('touchstart',function(e){

    var touch = e.originalEvent.targetTouches[0]; //取页面上第一个手指

   var x_ distance = touch.pageX; //获取手指在X轴上距最左边的距离

})

三个函数：

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

获取手指第几个函数：

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

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

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

 

 

---

　　原生写法

 

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

 

---