Evitar desplazamiento de página al arrastrar en IOS y Android

Question

Estoy trabajando en un juego de lienzo html5, pero no sé cómo manejar eventos táctiles. Cuando un usuario toca la pantalla y arrastra, el navegador desplazará la página. Me gustaría evitarlo, obtener el toque de inicio y tocar la posición final. ¿Es posible?

Gracias de antemano

Answer 1

Necesita anular el comportamiento por defecto toque para detener touchevents arrastrando la página. Claramente, necesitarás manejarlos de nuevo si tu página se vuelve más grande que el área disponible, pero cuando estás creando un juego, asumirás que estás haciendo un diseño al 100%/100%.

Este código es del índice predeterminado de phonegap.html pero te ayudará, estoy seguro.

function preventBehavior(e) { 
    e.preventDefault(); 
}; 

document.addEventListener("touchmove", preventBehavior, false); 

quiero añadir una cosa más, que es lo que está totalmente en el camino correcto evitando los marcos. Son geniales para algunas cosas, pero obtendrás resultados mucho mejores desde el principio.

Editar: aquí está el W3C working draft hablando de eventos táctiles, que puede ser útil para usted.

Answer 2

canvas.addEventListener('touchstart', function(e) 
{ 
    alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY); 
} 
canvas.addEventListener('touchend', function(e) 
{ 
    alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY); 
} 

He aquí un buen artículo sobre el tacto y gestos en los teléfonos móviles:

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Answer 3

Si no desea utilizar jQuery móvil o cualquier otra biblioteca continuación, puedes probar esto

var startX, startY, endX, endY; 
document.addEventListener("touchstart", function(e){ 
    startX = e.touches[0].pageX; 
    startY = e.touches[0].pageY; 

    e.preventDefault();//Stops the default behavior 
}, false); 

document.addEventListener("touchend", function(e){ 
    endX = e.touches[0].pageX; 
    endY = e.touches[0].pageY; 

    e.preventDefault();//Stops the default behavior 
}, false); 

Answer 4

Debido a los cambios de última hora realizados en las versiones recientes de Chrome, las respuestas anteriores ya no son correctas. Adjuntar un detector de eventos táctiles al documento o elementos del cuerpo provocará que el detector de eventos se registre en el modo "pasivo", lo que hace que se ignoren las llamadas al preventDefault.

hay dos soluciones:

• La solución preferida es utilizar el estilo CSS touch-action para especificar que no hay desplazamiento debería ocurrir (por ejemplo, con el valor "ninguno")

• en los casos en esto no es apropiado (por ejemplo, si el tipo de interacción debe cambiar dinámicamente de una manera que no puede determinarse antes de que comience el gesto), el detector de eventos debe registrarse con el tercer parámetro establecido en { passive: false } (debe realizar la detección del navegador para asegurarse de que el estilo es compatible primero, t toma).