手机网页中手指触摸计算 --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#函数