移动端js的三个事件

来源:luqidong 发布时间:2014-04-10 20:05:48 点击数:

最近接收了公司的touch站,对移动端的开发也要多看点了。首先从事件上面说移动端最重要的三个事件就是:

touchstart        触摸开始(手指放在触摸屏上)
touchmove       拖动(手指在触摸屏上移动)
touchend 触摸结束(手指从触摸屏上移开)
当然还有一个touchcancel,是在拖动中断时候触发。
事件用法都一个样子。下面是一个html5 canvas的画画应用:
$(function(){
  var 
  canvas = $('canvas'),
  context = canvas[0].getContext('2d');
  context.strokeStyle = 'rgba(0, 0, 0, 1)'; 
  context.lineWidth   = 3;
  var x,y;
  canvas.on('touchstart',function(e){
  if(e.originalEvent.touches.length===1){
  x = e.originalEvent.changedTouches[0].pageX;
  y = e.originalEvent.changedTouches[0].pageY; 
  $('#output').text(x+','+y);
  }    
  }); 
  canvas.on('touchmove',function(e){
  e.preventDefault();
  if(e.originalEvent.touches.length===1){
  context.beginPath();
  context.moveTo(x,y);
  x = e.originalEvent.changedTouches[0].pageX;
  y = e.originalEvent.changedTouches[0].pageY; 
  context.lineTo(x,y);
  context.stroke();
  context.closePath();
  $('#output').text(x+','+y);
  }    
  });
  canvas.on('touchend',function(e){
  if(e.originalEvent.touches.length===0){
  context.beginPath();
  context.moveTo(x,y);
  x = e.originalEvent.changedTouches[0].pageX;
  y = e.originalEvent.changedTouches[0].pageY; 
  context.lineTo(x,y);
  context.stroke();
  context.closePath();
  $('#output').text(x+','+y);
  }    
  });
});
})(jQuery);
效果图:
78OA办公系统