javascript - 鼠标事件到 ipad 兼容性的触摸事件

Question

我有这个 child 绘画应用程序，它使用鼠标事件在图像上作画。但是我需要将鼠标事件转换为触摸，以便它可以在 ipad 上工作。请有人可以向我解释如何执行此操作。我的应用程序代码与此示例代码非常相似 http://cool-php-tutorials.blogspot.co.uk/2011/05/simple-html5-drawing-app-with-saving.html .

P.S 我对 javascript 的了解不是高级水平，所以如果您能向我展示工作代码或示例，将会有很大帮助

我的鼠标事件代码如下。请将此功能从鼠标隐藏到触摸..请自从 2 天以来我一直坚持这个..:|

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();

// binding events to the canvas
$('#drawingCanvas').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;

  paint = true; // start painting
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);

  // always call redraw
  redraw();
});

$('#drawingCanvas').mousemove(function(e){
  if(paint){
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});

// when mouse is released, stop painting, clear the arrays with dots
$('#drawingCanvas').mouseup(function(e){
  paint = false;

  clickX = new Array();
  clickY = new Array();
  clickDrag = new Array();
});

// stop painting when dragged out of the canvas
$('#drawARobot').mouseleave(function(e){
  paint = false;
});


// The function pushes to the three dot arrays
function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}



// this is where actual drawing happens
// we add dots to the canvas


function redraw(){

  for(var i=0; i < clickX.length; i++)
  {  
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }
}

Answer 1

你可以这样映射它:

$('#drawingCanvas').bind("mousedown touchstart", function(e){

$('#drawingCanvas').bind("mousemove touchmove", function(e){

$('#drawingCanvas').bind("mouseup touchend", function(e){

然后根据需要微调代码。