¿Los navegadores de escritorio admiten eventos táctiles?

Question

Estoy tratando de ponerme al día sobre HTML5 creando un prototipo de una aplicación de dibujo extremadamente simple usando <canvas> y tocando eventos como ontouchstart y .

Esto se muestra y funciona bien en un emulador de Android donde uso clics del mouse para simular eventos táctiles. Sin embargo, no funciona en absoluto cuando se ejecuta en mi navegador de escritorio (Safari 5.1.1, Firefox 7 en Windows).

Pensé que los eventos de clic del mouse se interpretarían como eventos táctiles como lo son cuando se ejecutan dentro del emulador.

Me pregunto ahora si quizás los navegadores de escritorio simplemente no admiten eventos táctiles.

Answer 1

Firefox 6 y superior admite los eventos táctiles. Consulte la tabla de compatibilidad here.

MDN article on Touch Events

EDIT: ¿Está probando con una pantalla táctil o el ratón? Los eventos del mouse no se traducen automáticamente a eventos táctiles. Consulte this post para saber cómo simular eventos táctiles con un mouse.

Answer 2

ontouchstart se agregará a la versión de iphones de webkit para javascript. podrías probarlo pero solo en un emulador.

Answer 3

Es al revés. Los navegadores móviles traducen los eventos de toque a mouse para soporte heredado. Si necesita funcionar en dispositivos móviles y de escritorio, y no necesita eventos táctiles, puede usar eventos de mouse en su lugar. De lo contrario, enlace los eventos táctiles y del mouse y haga que el evento táctil cancele el evento del mouse. De esta forma, en los dispositivos móviles, el toque de incendios y el mouse no. En el escritorio, el toque no se dispara y el mouse lo hará.

Para pilau, aquí hay un ejemplo simple de cancelación del evento click en dispositivos móviles. Tenga en cuenta que la pregunta es más acerca del dibujo, que implicaría arrastrar el clic, lo que requeriría un poco más de código para la detección, pero la idea básica es la misma, enlazar los eventos que necesita manejar. Luego, e.preventdefault() impedirá que los navegadores móviles emulen eventos tipo clic.

$('#element').on('touchend click', function(e){ 

    // Do your onclick action now 

    // cancel the onclick firing 
    e.preventDefault(); 
});