Android-Browser verzaubert Ereignisse für zwei aufeinander folgende Taps

Ich versuche JavaScript und jQuery zu verwenden, um Berührungsereignisse zu erfassen. Aber ich sehe ein sehr seltsames Verhalten im Webbrowser unter Android 2.3.2: Immer wenn ich auf den Bildschirm tippe und dann schnell irgendwo anders auf dem Bildschirm tippe, der Browser:

• zeigt momentan einen orangefarbenen Rahmen und hebt den gesamten Bildschirm hervor, und
• sendet mir die falschen Ereignisse.

Der orange Rand scheint nur ein verwandtes Symptom des gleichen zugrunde liegenden Problems zu sein, also mache ich mir keine Sorgen darüber - es ist tatsächlich praktisch, um zu wissen, wann der Browser Dinge vermasselt. Was ich wirklich wissen möchte, ist wie kann ich immer die richtigen Berührungsereignisse für zwei schnelle Antippen erhalten? Ich glaube, wenn das Problem gelöst ist, wird der orange Rand ebenfalls verschwinden.

Was folgt, sind all die schmerzhaften Details, die ich bisher erarbeitet habe.

Hier ist eine Seite, die das Problem zeigt und eine Menge diagnostischer Informationen über die Details und Details anzeigt Zeitpunkt jedes empfangenen Ereignisses. Sie werden sicher die orangefarbenen Flash- / Bad-Ereignisse erhalten, wenn Sie auf das blaue Rechteck tippen und dann schnell auf das schwarze Rechteck tippen.

Mein jQuery-Code ist ziemlich Standard. Die Implementierung von log ist nicht wichtig. Das Problem ist, dass der Browser es nicht aufruft, wenn es sollte.

Weitere Details zu den eingangs beschriebenen Phänomenen:

Orange Rahmen und Hervorhebung: Dies ist der gleiche orange Rahmen und hebt hervor, dass der Browser einen Hyperlink umrahmt, wenn Sie darauf klicken. Aber es gibt keine Hyperlinks auf der Seite, und der Browser zeichnet diesen orangefarbenen Rahmen um den gesamten Bildschirm herum - oder genauer gesagt, um den äußeren <div id="battle"> , an den ich Ereignisse über jQuery anhänge.

Falsche Ereignisse: In meinem touchstart Ereignishandler rufe ich event.preventDefault() an, um dem Browser zu sagen, dass er nicht scrollt, Mausereignisse usw. nicht synthetisiert. Deshalb erwarte ich das Erhalten Sie nur touchstart und touchend Ereignisse. Und ich tue es, beim ersten Tippen. Aber anstatt touchstart / touchend für den zweiten Tipp, erhalte ich eine ganze Anzahl von Kombinationen von Berührungsereignissen, synthetisierten Mausereignissen und gelegentlich touchcancel für das zweite Tippen oder sogar wiederholte Ereignisse für das erste Tippen. Details unten.

Dieses Verhalten tritt auch nur unter ganz bestimmten Umständen auf:

• Der erste Tipp muss kurz sein (weniger als ~ 200ms).
• Der zweite Tipp muss schnell kommen (weniger als ~ 450ms nach dem touchstart des ersten Tap).
• Der zweite Tap muss mindestens 150 Pixel vom ersten Tap entfernt sein (gemessen entlang der Diagonalen von den Koordinaten des touchstart des ersten Tap).
• Wenn ich meinen Code mit den Hooks mousedown und mouseup entferne, werden die orangefarbenen Rechtecke nicht mehr angezeigt. Die Berührungsereignisse sind jedoch manchmal immer noch verstümmelt.

Soweit ich meine, dass die Ereignisse verstümmelt sind, hier ist, was ich sehe. Wenn ich "1:" schreibe, bedeutet das, dass die Ereignisse für die ersten Tap-Koordinaten sind; "2:" bedeutet die Koordinaten des zweiten Tap. Ich sah die folgenden Muster von Ereignissen (Prozentsätze zeigen an, wie oft jede nach 100 Versuchen auftauchte):

• (50%) 1: Touchstart 1: Touchend 1: Mausklick 1: Mausklick (kurze Verzögerung) 2: Mausklick 2: Mausklick
• (35%) 1: Touchstart 1: Touchend 2: Touchstart 1: Mausklick 1: Mausklick 2: Touchend
• (10%) 1: Touchstart 1: Touchend 2: Touchstart 1: Mausklick 1: Mausklick 2: Touchcancel (kurze Verzögerung) 2: Mausklick 2: Mausklick
• (3%) 1: Touchstart 1: Touchend 2: Touchstart 2: Touchend (kurze Verzögerung) 1: mousedown 1: mouseup
• (2%) 1: touchstart 1: touchend 1: mousedown 1: mouseup (und nichts für den zweiten Tap)

Einige Kombinationen von Ereignissen scheinen häufiger zu kommen, je nachdem, wie schnell ich tippe, aber ich habe das Muster noch nicht ganz durchnässt. (Zwei schnelle, scharfe Hähne scheinen eher unter dem zweiten Punkt oben zu erscheinen, während ein schnellerer Ansatz mit weniger Betonung der Knusprigkeit eher der erste Gegenstand ist. Aber ich habe keine spezifischen Timing-Zahlen identifiziert, die dazu führen zu jedem.) In ähnlicher Weise können die oben angegebenen "kurzen Verzögerungen" irgendwo zwischen ~ 150 ms und ~ 400 ms liegen; Ich habe das ganze Muster auch dort nicht rückentwickelt.

Wenn ich mousedown und mouseup nicht hake, ist die Verteilung grob wie folgt:

• (40%) 1: Touchstart 1: Touchend 2: Touchstart 2: Touchcancel
• (35%) 1: Touchstart 1: Touchend 2: Touchstart 2: Touchend (das tatsächlich gewünschte Verhalten)
• (25%) 1: Touchstart 1: touchend (und nichts für den zweiten Tipp)

Wenn ich also die Mausereignisse nicht hake, funktioniert es ein Drittel der Zeit; und wenn ich bereit wäre vorzutäuschen, dass touchcancel dasselbe bedeutet wie touchend , könnte ich das bis zu 75% der Zeit bekommen. Aber das ist immer noch ziemlich sucky.

Alternativen, die ich schon versucht habe:

• Ich habe versucht, jQuery Mobile vmousedown und vmouseup -Ereignisse , aber sie werden nicht immer für den zweiten Tipp ausgelöst, ich vermute wegen der gleichen zugrunde liegenden Ereignis Seltsamkeit.
• Ich könnte Berührungsereignisse einfach ganz vergessen und nur die synthetisierten Mausereignisse verwenden, aber es gibt normalerweise eine Verzögerung von etwa einer halben Sekunde zwischen der physischen Berührung und der Lieferung des synthetisierten Mausereignisses, während die Berührungsereignisse unmittelbar sind reaktionsfähiger sein. Ich möchte auch das Scrollen verhindern - das ist für ein Fullscreen-Spiel, und ich möchte lieber nicht, dass der Benutzer versehentlich die Adressleiste in den Blick scrollt und einen Teil des Spiels blockiert - und preventDefault auf touchstart tut. erreicht dies normalerweise (obwohl gelegentlich das zweite Tippen tatsächlich den Bildschirm scrollen kann trotz meiner preventDefault ... ein anderer Grund, den ich dieses ganze Ereignischaos lösen möchte).
• Ich habe einen Webbrowser eines Drittanbieters ausprobiert ( Dolphin ), aber es hat die gleichen Probleme mit Ereignissen. Ich vermute, es ist wahrscheinlich ein Problem mit der Art und Weise, wie das zugrundeliegende WebView Ereignisse an Skripte liefert.

Kann jemand vorschlagen, wie ich meinen HTML-Code, meine Event-Handler oder irgendetwas anderes ändern kann, um Touch-Ereignisse für zwei aufeinanderfolgende schnelle Antippen zuverlässig zu erhalten?