2011-02-07 18 views
65

Estoy desarrollando una aplicación HTML para el iPad. Como tal, utiliza eventos táctiles y animaciones webkit-CSS.Simulación de eventos táctiles en un navegador de PC

Hasta ahora he utilizado Chrome como mi entorno de depuración debido a su modo de desarrollador impresionante.

Lo que me gustaría es poder depurar mi Html/JavaScript usando el depurador de Google-Chrome en mi PC mientras simulo eventos táctiles con el mouse.

Mi sitio no tiene eventos multitáctiles ni eventos de mouse (no hay mouse en el iPad).

No estoy realmente interesado en ver el diseño de las aplicaciones, sino más bien en depurar su comportamiento.

¿Hay algún complemento para que los eventos del mouse se traduzcan en eventos táctiles en un navegador de escritorio?

+1

No hay sustituto para la depuración de su sitio en un dispositivo real (sobre todo si alguna vez decide soporte multi-touch) Afortunadamente, la depuración en Chrome Mobile es [muy fácil] (https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en) ahora, puede depurar remotamente a través de tu PC. También puede conectarse a ADB a través de Wi-Fi sin necesidad de un cable USB. – rustyx

Respuesta

94

Como del 13 de abril 2012

En Google Chrome desarrollador y canario construye ahora hay una casilla de verificación de "Emular táctil eventos "

Puede encontrarlo abriendo th e F12 herramientas de desarrollador y haciendo clic en el engranaje en la parte inferior derecha de la pantalla.

on Chrome v22 Mac OS X

Por ahora (Chrome ver.36.0.1985.125) se puede encontrar aquí: F12 => Esc => emulación. console

+0

ninguna casilla de verificación para mí. cromo 18.0 osx león. hizo clic en el engranaje pequeño, pero no hay ninguna casilla de verificación para eso! – codepushr

+1

* Emular eventos táctiles * está en Chrome 19 y superior. –

+15

¿Qué significa "emular eventos táctiles" en realidad? –

0

Si se dirige específicamente a Webkit (iPad y todo), puede confiar en el código del controlador de eventos normal (add/removeEventListener). Teniendo esto en cuenta, probablemente solo deba ramificar en algunos eventos, por ejemplo, 'ontouchstart' se convierte en 'onclick' en función del entorno.

Offhand No conozco ninguna biblioteca que ofrezca este nivel de bifurcación. Bastante fácil de hacer tú mismo.

+0

Gracias, esto es lo que estoy haciendo ahora. Pero ..., una gran parte de mi código tiene que ver con la escritura de controles personalizados atractivos, lo que significa que cada control tiene su propio comportamiento único cuando se toca. Así que estoy buscando una pieza de javas-cript que pueda hacer esto una vez en el nivel del documento (mientras se mantiene OnTouch independiente para cada elemento de documento diferente). O tal vez un complemento de navegador. Parece un requisito genérico suficiente (depurar sitios web móviles desde un navegador de escritorio ...) – eshalev

2

Utilizamos este script: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ Permitirá que todos los eventos del mouse en su aplicación sean activados por eventos táctiles en su lugar. Entonces, como ya teníamos una aplicación web que usaba clic derecho, arrastrar y soltar, etc., nos permitía realizar todas las mismas funciones con el tacto.

Sé que es casi al revés de la simulación que estabas buscando (tendrás que crear un script para que tu aplicación sea utilizada principalmente por un mouse) pero espero que ayude de todos modos.

7

El navegador de escritorio puede simular eventos táctiles mediante la importación de JS + CSS adicional. Tome un vistazo a:

  1. addTouch
  2. Phantom Limb
+1

Otra opción más: http://mwbrooks.github.com/thumbs.js/ –

+0

@weird ... thumbs.js presents tocar eventos que no tienen ninguno de los campos táctiles que esperaría (como "toques")! – Michael

Cuestiones relacionadas