如何將這些jQuery鼠標事件轉換爲觸摸事件（對於iPad）

Question

我創建了一個jQuery臨時票據，用戶可以通過左鍵單擊+按住並移動光標以將頂部圖像從看到下面的圖片。這適用於鼠標事件。我希望能夠在iPad上使用（觸摸事件）。我如何修改它？

var topImage = new Image(); 
var bottomImage = new Image(); 
var coinImage = new Image(); 
bottomImage.src = "images/question.png"; 
coinImage.src = "images/coin.png"; 

function init() 
{ 
var isMouseDown = false; 
var canvasWidth = $('#canvas').width(); 
var canvasHeight = $('#canvas').height(); 
$('body').append('<canvas id="overlay" width="'+canvasWidth+'" height="'+canvasHeight+'" />'); // Create the coin overlay canvas 
var overlayctx = $('canvas')[1].getContext('2d'); 
overlayctx.drawImage(coinImage, 0,0); 


function scratchOff(x, y) 
{ 
    mainctx.save(); 
    mainctx.beginPath(); 
    mainctx.arc(x,y,radius,0,Math.PI*2,false); // we don't fill or stroke the arc intentionally 
    mainctx.clip(); 
    mainctx.drawImage(bottomImage, 0, 0); 
    mainctx.restore(); 
} 

$('#overlay').mousedown(function(e){ 
     isMouseDown = true; 
     var relX = e.pageX - this.offsetLeft; 
     var relY = e.pageY - this.offsetTop; 
     scratchOff(relX, relY, true); 
}); 
$('#overlay').mousemove(function(e){ 
    var relX = e.pageX - this.offsetLeft; 
    var relY = e.pageY - this.offsetTop; 
    overlayctx.clearRect(0,0,canvasWidth,canvasHeight); 
    overlayctx.drawImage(coinImage, relX-radius, relY-radius); 
    if (isMouseDown) scratchOff(relX, relY, false); 
}); 
$('#overlay').mouseup(function(e){ 
    isMouseDown = false; 
}); 

var mainctx = $('canvas')[0].getContext('2d'); 
var radius = 20; 
topImage.onload = function(){ 
    mainctx.drawImage(topImage, 0, 0); 
}; 
topImage.src = "images/skava.png"; 
} 

Answer 1

變化以下事件名稱：

鼠標按下 - > touchstart

鼠標鬆開 - > touchend

的 '擦'（從左至右或從右至左）的手勢我推薦使用： http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

希望可以幫到