Mapeo de mouse para tocar Eventos para probar sitios web móviles en navegadores de escritorio

Question

Actualmente estoy desarrollando un sitio web que también debería funcionar en dispositivos móviles. Pero dado que estoy (por supuesto) utilizando mucho Javascript, preferiría tener un entorno de prueba basado en escritorio (FireFox, FireBug, etc.). ¿Hay alguna forma de asignar eventos de mouse a Touch Events para poder probar el sitio web en un navegador de escritorio, pero "simulando" todas las cosas táctiles como si fuera un dispositivo móvil?

He visto muchas bibliotecas/funciones para hacerlo al revés, pero eso no es lo que quiero.

Answer 1

Utilizo un método donde marco el teclado para gestos de pantalla. Por ejemplo, en un sitio en el que estoy trabajando, quiero que la página retroceda si deslizo el dedo hacia la izquierda e iré luego si deslizo hacia la derecha. Estoy usando la API jQuery Mobile.

Primero mi depurador Tooler:

$(document).keypress(function(event) { 
    // Simulate Left Flick (A) 
    if (event.which == '97') { 
      alert('LEFT FLICK'); 
      SomeFunction1(); 
    } 
    // Simulate Right Flick (D) 
    if (event.which == '100') { 
      alert('RIGHT FLICK'); 
      SomeFunction2(); 
    } 
    }); 

Mis páginas tienen la siguiente plantilla

$("#Page") 
    .live('swipeleft',function() { 
      SomeFunction1(); 
    }) 
    .live('swiperight',function() { 
      SomeFunction2() 
    }); 

Si desea cada página para hacer algo diferente, usted debe atar el objeto pulsación de tecla a la página. Tu código sería más o menos así.

$("#Page") 
    .live('swipeleft',function() { 
      SomeFunction1(); 
    }) 
    .live('swiperight',function() { 
      SomeFunction2() 
    }) 
    .keypress(function(event) { 
      // Simulate Left Flick (A) 
      if (event.which == '97') { 
       alert('LEFT FLICK'); 
       SomeFunction1(); 
      } 
      // Simulate Right Flick (D) 
      if (event.which == '100') { 
       alert('RIGHT FLICK'); 
       SomeFunction2(); 
      } 
    }); 

Puede asignar otras teclas a otros gestos simplemente cambiando el event.which == "#" en el código depurador.

Espero que ayude!

Answer 2

En Firefox (29) abra el Desarrollador | Responsive Design View [Ctrl + Shift + M] y haga clic en "Simulate Touch Events". ¡Entonces puede usar el mouse para deslizar!