javascript + html5 canvas：繪圖而不是在移動設備上拖動/滾動？

我使用html5畫布+一些JavaScript（onmousedown/move/up）在網頁上創建簡單的繪圖板。javascript + html5 canvas：繪圖而不是在移動設備上拖動/滾動？

適用於Opera，Firefox，Chrome等（在臺式電腦上試用）。但是如果我用iPhone訪問這個頁面，當試圖在畫布上繪畫時，它會拖動或滾動頁面。

這對其他頁面內容很好，通過向下滑動頁面，您可以照常在移動瀏覽器中瀏覽頁面。但是，是否有辦法在畫布上禁用此行爲，以便移動訪問者也可以在其上繪製某些內容？

供您參考，這裏有一個minimalisic例如：

<html><head><script type='text/javascript'> 
function init() 
{ 
    var canvas = document.getElementById('MyCanvas'); 
    var ctx = canvas.getContext('2d'); 
    var x = null; 
    var y; 
    canvas.onmousedown = function(e) 
    { 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    ctx.beginPath(); 
    ctx.moveTo(x,y); 
    } 
    canvas.onmouseup = function(e) 
    { 
    x = null; 
    } 
    canvas.onmousemove = function(e) 
    { 
    if (x==null) return; 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetLeft; 
    ctx.lineTo(x,y); 
    ctx.stroke(); 
    } 
} 
</script></head><body onload='init()'> 
<canvas id='MyCanvas' width='500' height='500' style='border:1px solid #777'> 
</canvas></body></html>

有一些特殊的風格或事件我要補充到畫布上，以避免拖動/在畫布上刷卡時，滾動網頁？

來源

2012-04-02 Sheldon Pinkman

iPad/iPhone沒有鼠標*事件。您需要使用touchstart,touchmove和touchend。

canvas.ontouchstart = function(e) { 
    if (e.touches) e = e.touches[0]; 
    return false; 
}

它在觸摸啓動方法return false重要的，因爲否則頁面滾動觸發：所以你需要得到第一個這樣的事件，這可以有多個觸摸。

來源

2012-04-02 11:57:22 Grassator

啊，說得通。之前從未注意到這些。謝謝！ – 2012-04-02 14:12:31

在Android上這不起作用，但你可以按照規範使用'e.preventDefault（）;'http://www.w3.org/TR/touch-events/#the-touchstart------ - -事件 – lapo 2012-08-29 10:11:22

javascript + html5 canvas：繪圖而不是在移動設備上拖動/滾動？

回答

相關問題