Simulieren von Berührungsereignissen in einem PC-Browser

70

Ich entwickle eine HTML-Anwendung für das iPad. Als solches verwendet es Berührungsereignisse und Webkit-CSS-Animationen.

Bis jetzt habe ich Chrome als Debugging-Umgebung verwendet, weil es ein großartiger Entwicklermodus ist.

Ich möchte in der Lage sein, mein HTML / JavaScript mit dem Debugger von Google-Chrome auf meinem PC zu debuggen, während ich Berührungsereignisse mit meiner Maus simuliere.

Meine Website enthält keine Multi-Touch-Ereignisse und keine Mausereignisse (keine Maus auf dem iPad).

Ich bin eigentlich nicht daran interessiert, das Anwendungslayout zu sehen, sondern eher daran, sein Verhalten zu debuggen.

Gibt es ein Plugin, mit dem Mausereignisse in einem Desktop-Browser in Berührungsereignisse übersetzt werden können?

javascript ipad html google-chrome touch eshalev
quelle
1
Es gibt keinen Ersatz für das Debuggen Ihrer Site auf einem realen Gerät (insbesondere, wenn Sie sich jemals für die Unterstützung von Multi-Touch entscheiden). Glücklicherweise ist das Debuggen in Chrome Mobile jetzt sehr einfach . Sie können das Debuggen remote über Ihren PC durchführen. Sie können auch über WLAN eine Verbindung zu ADB herstellen, ohne dass ein USB-Kabel erforderlich ist.
Rustyx
Überprüfen Sie hier freakyjolly.com/how-to-test-touch-behavior-in-google-chrome
Code Spy

Antworten:

95

Stand: 13. April 2012

In Google Chrome-Entwickler- und Kanarienvogel-Builds gibt es jetzt ein Kontrollkästchen für "Touch-Ereignisse emulieren".

Sie finden es, indem Sie die F12-Entwicklertools öffnen und auf das Zahnrad unten rechts auf dem Bildschirm klicken.

unter Chrome v22 Mac OS X.

Im Moment (Chrome Version 36.0.1985.125) finden Sie es hier: F12 => Esc => Emulation. Konsole

Simon Sarris
quelle
kein Kontrollkästchen für mich. Chrom 18.0 Osx Löwe. klickte auf das kleine Zahnrad, aber es gibt kein Kontrollkästchen dafür!
Codepushr
1
Das Emulieren von Berührungsereignissen ist in Chrome 19 und höher möglich.
Sam Dutton
15
Was bedeutet eigentlich "Berührungsereignisse emulieren"?
Sie können diese Berührungsereignisse "verwenden", wenn Sie die Maustaste gedrückt halten und die Maus so bewegen, als würden Sie Ihren Finger bewegen. Um ehrlich zu sein, ist dies nicht wirklich gut implementiert und funktioniert nur für EINEN Finger, da ... nun ... wir nur einen Mauszeiger haben (oder Sie haben ein Laptop-Touchpad mit mehreren Berührungspunkten)
Sliq
rettete mich beim Versuch, eine Menge unnötiger Bibliotheken zu integrieren
Obi
7

Der Desktop-Browser kann Berührungsereignisse simulieren, indem er zusätzliches JS + CSS importiert. Schauen Sie sich an:

  1. addTouch
  2. Phantomglied
Vlad
quelle
@weird ... thumbs.js präsentiert Berührungsereignisse, die keines der von mir erwarteten Berührungsfelder haben (wie "Berührungen")!
Michael
2

Wir verwenden dieses Skript: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ Damit können alle Mausereignisse in Ihrer Anwendung stattdessen durch Berührungsereignisse ausgelöst werden. Da wir bereits eine Webanwendung hatten, die Rechtsklick, Drag & Drop usw. verwendete, konnten wir alle Funktionen mit Berührung ausführen.

Ich weiß, dass es fast das Gegenteil der Simulation ist, nach der Sie gesucht haben (Sie müssen Ihre Anwendung skripten, um hauptsächlich von einer Maus verwendet zu werden), aber ich hoffe, es hilft trotzdem.

Bishbashbosh
quelle
2

Eine andere Möglichkeit, Multi Touch in einem Desktop-Browser zu simulieren, ist der Touch Emulator von Hammer.js

Corne
quelle
0

Wenn Sie speziell auf Webkit abzielen (iPad und alle), können Sie sich auf den normalen Ereignishandlercode (add / removeEventListener) verlassen. In diesem Sinne müssen Sie wahrscheinlich nur auf einige Ereignisse verzweigen - z. B. wird "ontouchstart" je nach Umgebung zu "onclick".

Auf Anhieb kenne ich jedoch keine Bibliotheken, die diese Verzweigungsstufe bieten. Ziemlich einfach, sich selbst zu machen.

Ryan McGrath
quelle
Danke, das mache ich jetzt. Aber ... ein Großteil meines Codes hat mit dem Schreiben ansprechender benutzerdefinierter Steuerelemente zu tun, was bedeutet, dass jedes Steuerelement beim Berühren sein eigenes Verhalten aufweist. Daher suche ich nach einem Stück Javas-Cript, das dies einmal auf Dokumentebene tun kann (wobei für jedes Dokumentelement ein unabhängiges OnTouch beibehalten wird). Oder vielleicht ein Browser-Plugin. Es scheint eine generische Anforderung zu sein (Debuggen von mobilen Websites über einen Desktop-Browser ...)
eshalev