mouseover feuert manchmal statt touchstart - warum?
Ich habe ein sehr merkwürdiges Verhalten gefunden, das ich nicht erklären kann. Willst du Folgendes tun:
Ein Handler muss auf ein Ereignis touchstart oder mouseover reagieren, abhängig vom Typ des Eingabegeräts. Beachten Sie, dass ich hybride Geräte (mit Maus und Touchscreen) unterstützen möchte und dass ich mich nicht auf Zeigerereignisse verlassen kann.
Jetzt habe ich nur die beiden Ereignisse touchstart und mouseover eingerichtet. Und meistens funktioniert es gut. Verwenden Sie auch preventDefault , um simulierte "Maus" -Ereignisse nach Touch-Ereignissen zu verhindern. Aber was mich total verwirrt ist, dass manchmal ein mouseover Ereignis auftritt, und wenn ich den preventDefault entferne, scheint es sogar, dass mouseover stattdessen auslöst / strong> eines touchstart . Warum oh warum passiert das?
Außerdem ist dies sowohl mit Android als auch mit iOS reproduzierbar! Obwohl es scheint, mit Android (mit Chrome) leichter ausgelöst werden.
Ich habe einen kleinen Testfall vorbereitet, damit du es selbst ausprobieren kannst. Beachten Sie, dass dieses Verhalten nur dann ausgelöst wird, wenn Sie irgendwo auf die Grenze zwischen dem roten DIV (mit den Ereignissen) und dem Hintergrund tippen. Einfach in die Mitte tippen, funktioniert 100%. Und Sie können mehr oder weniger Versuche benötigen, bis es passiert.
Jede Hilfe sehr geschätzt!
2 Antworten
Ich habe Ihr Beispiel ein wenig herumgestöbert und es scheint ein Bug in Chrome zu sein. Ich konnte es in Firefox nicht reproduzieren. Sie können es in den Chrome-Entwicklertools auf dem Desktop reproduzieren und tatsächlich habe ich einen Weg gefunden, es in 100% der Fälle zu reproduzieren:
- Öffnen Sie die Dev Tools und wechseln Sie in den Gerätemodus
- Platzieren Sie den Kreiscursor auf den Rand des roten Rechtecks, sodass sich der Mittelpunkt des Cursors außerhalb des roten Rechtecks befindet
Entschuldigung für die Bildqualität, ich kann diesen Cursor nicht mit einem Screenshot erfassen
- klicken Sie auf
- Damit es das nächste Mal funktioniert, müssen Sie zuerst auf den schwarzen Hintergrund außerhalb des roten Rechtecks klicken
Es scheint also, dass dies geschieht, wenn der Mittelpunkt der Berührung außerhalb des Rechtecks liegt, der Radius der Berührung jedoch das Rechteck überlappt. Das heißt, ich bin mir nicht sicher, was Sie hier tun können, außer einen Fehlerbericht einzureichen
Mausereignisse (mouseover, mouseout, mousedown, mouseup, mousemove, usw.) sind spezifisch für das Maus-Eingabegerät.
Das mouseover javascript-Ereignis würde zu den touchenter touch-Ereignissen führen. Dieses Ereignis ist Teil eines W3C-Entwurfs (derzeit nur Firefox-Unterstützung). Wenn Sie es also verwenden möchten, müssen Sie Ihre onmouseover-Funktion mithilfe des touchmove-Ereignisses implementieren und die Koordinaten überprüfen, um festzustellen, ob sie sich mit den Koordinaten Ihres HTML-Codes überschneiden Element.
Ich denke, dass es dir hilft.
Tags und Links javascript events touch