lienzo de javascript + html5: ¿dibujo en lugar de arrastrar/desplazarse en dispositivos móviles?

Estoy usando un lienzo html5 + algo de javascript (onmousedown/move/up) para crear un simple panel de dibujo en una página web.lienzo de javascript + html5: ¿dibujo en lugar de arrastrar/desplazarse en dispositivos móviles?

Funciona bien en Opera, Firefox, Chrome, etc. (probado en PC de escritorio). Pero si visito esta página con un iPhone, cuando intento dibujar en el lienzo, arrastra o desplaza la página.

Esto está bien para el resto del contenido de la página, deslizando la página hacia arriba y abajo puede navegar por la página en un navegador móvil como de costumbre. Pero, ¿hay alguna forma de desactivar este comportamiento en el lienzo, de modo que los visitantes móviles también puedan dibujar algo en él?

Para su referencia, aquí hay un ejemplo 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>

¿Hay algún estilo especial o evento tengo que añadir a la lona, con el fin de evitar arrastrar/desplazar la página cuando deslizar en el lienzo?

Fuente

2012-04-02 Sheldon Pinkman

iPad/iPhone no tiene mouse * events. Debe usar touchstart, touchmove y touchend. Este evento puede tener múltiples toques por lo que necesita para obtener primero la siguiente manera:

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

Es importante return false en el método de inicio toque porque de lo contrario página de desplazamiento se activa.

Fuente

2012-04-02 11:57:22 Grassator

Ah, tiene sentido. Nunca me di cuenta de esto antes. ¡Gracias! –

En Android esto no funciona, pero puede usar 'e.preventDefault();' según las especificaciones http://www.w3.org/TR/touch-events/#the-touchstart------ ---evento – lapo

lienzo de javascript + html5: ¿dibujo en lugar de arrastrar/desplazarse en dispositivos móviles?

Respuesta

Cuestiones relacionadas