JS事件监听手机屏幕触摸事件

福利：阿里云服务器-全场景 首次购买ECS享实例首台5折，限时领取红包

处理Touch事件能让你跟踪用户的每一根手指的位置,可以绑定以下四种Touch事件：

touchstart:  // 手指放到屏幕上的时候触发 
touchmove:  // 手指在屏幕上移动的时候触发 
touchend:  // 手指从屏幕上拿起的时候触发 
touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详

 

 

事件属性一般通过 event.changedTouches获得

 

 

 

client / clientY：// 触摸点相对于浏览器窗口viewport的位置 
pageX / pageY：// 触摸点相对于页面的位置 
screenX /screenY：//触摸点相对于屏幕的位置 
identifier： // touch对象的unique ID

简单实现

 

 

 

 

var startX=startY=0;
function touchSatrtFunc(e) {  
  e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
  var touch = e.Touches[0]; //获取第一个触点  
  var x = Number(touch.pageX); //页面触点X坐标  
  var y = Number(touch.pageY); //页面触点Y坐标  
  startX = x;  
  startY = y; 
}  
//touchmove事件 
function touchMoveFunc(e) {  
  e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
    var touch = e.touches[0];
    var x = touch.pageX - startX,
      y = touch.pageY - startY;
    var text = 'Move：（' + (x) + ', ' + y + '）';  
    document.title = text;
}  

//touchend事件 
function ToucheEndFunc(e) {  
  e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
  var touch = e.changedTouches[0]; //获取第一个触点  

  var x = touch.pageX; //页面触点X坐标	  
  var y = Number(touch.pageY); //页面触点Y坐标  
  var text = 'end：（' + x + ', ' + y + '）';  
  document.title = text;
}