Ich versuche, mit einem Klick auf die Schaltfläche umzugehen. Der "Button" ist ein benutzerdefiniertes div, das auch Kinder enthalten kann. Der Klick-Callback sollte ausgelöst werden, wenn der Benutzer im Element geklickt und freigegeben hat. Wenn der Benutzer in das Feld klickt und es anschließend nach außen zieht und freigibt, sollte der Handler nicht auslösen. Ich muss dafür sorgen, dass das sowohl auf dem Desktop als auch auf dem Handy funktioniert, daher verwende ich mousedown/mouseup und touchstart/touchend Ereignisse.
Ich muss die Button-Klasse von "gedrückt" auf "normal" ändern, auch wenn der Benutzer nach draußen freigibt, also muss ich einen Listener hinzufügen, um das freigebende Ereignis über das Dokument zu erfassen:
%Vor%Es funktioniert gut mit Klicks, aber es funktioniert nicht wie erwartet mit Berührungsereignissen. Ich habe das in Chrome für Android getestet und wenn du über das Element drückst, ziehst du das "Inside!" Alarm wird angezeigt.
Das Problem ist in diesem Zustand:
%Vor% Ich versuche zu überprüfen, ob das touchend -Ereignis in der Schaltfläche oder in einem der untergeordneten Elemente aufgetreten ist. Wenn die Schaltfläche keine untergeordneten Elemente enthält, wird der erste Teil der OR-Klausel in true aufgelöst, wenn Sie darauf klicken und dann nach außen freigeben. Wenn die Schaltfläche untergeordnete Elemente enthält und ich in die untergeordneten Elemente klicke, wird in jedem anderen Teil des Fensters der zweite Teil der Klausel aktiviert.
Was ist falsch an diesem Code?
Vielen Dank im Voraus.
AKTUALISIEREN
Ich habe es auch in BlackBerry 10 mit den gleichen Ergebnissen getestet. Offensichtlich ist das Ziel für das touchend Ereignis der Knopf (oder die Kinder), selbst wenn ich draußen geklickt habe. Soll es so funktionieren?
AKTUALISIEREN
Und hier ist warum. Dies ist was die W3C-Dokumentation über die Veranstaltung sagt :
Das Ziel dieses Ereignisses muss dasselbe Element sein, das das Touchstart-Ereignis erhalten hat, als dieser Berührungspunkt auf der Oberfläche platziert wurde, auch wenn der Berührungspunkt sich seitdem außerhalb des interaktiven Bereichs des Zielelements bewegt hat. em>
Es macht keinen Sinn für mich, aber trotzdem erklärt das mein Problem. Ich ging davon aus, dass das Ereignis touchend über das Element aufgerufen würde, bei dem der Finger losgelassen wurde. Wäre es möglich, die Fingerauslösung mit einem anderen Ansatz zu erkennen?
AKTUALISIEREN
Ich habe versucht, die Koordinaten von touchevent zu erhalten, um das Element dort mit document.elementFromPoint zu erhalten. Das Problem ist, dass dieses Ereignis keine Koordinaten enthält (die Listen changedTouches und touches sind leer). Ich habe das Ereignis im Debugger gründlich untersucht und es gibt keine Möglichkeit, andere Coords als die ursprünglichen Ereignisse wiederherzustellen. Dann dachte ich, ich könnte das letzte touchmove -Ereignis zwischenspeichern und die Koordinaten von dort bekommen, aber auch dieses Ereignis hat keine eigenen Koordinaten! Warum auf der Erde existieren diese beiden Ereignisse, wenn sie nutzlos sind? Und ich habe diesen Ansatz in iOS, Android und BB10 mit identischen Ergebnissen getestet.
Ich habe aufgegeben. Ich rufe den Rückruf an, auch wenn der Benutzer nach draußen klickt. Ich kann nicht glauben, dass es 2013 Jungs sind und es gibt keine (einfache) Möglichkeit, dies zu tun? Ich könnte den drag & amp; drop api verwenden, aber laut diesem wird er auf dem Handy nicht unterstützt (ich muss die mobile Webentwicklung lieben).
Endlich (fast) hat es in BB10 und Android funktioniert. Ich habe eine Reihe von Problemen in den Fragenupdates hinterlassen, um es zusammenzufassen: Das touchend -Ereignisziel ist das gleiche wie das touchstart , und es kommt ohne Koordinaten (der API-Designer hat sich aus irgendeinem Grund dafür entschieden, "zu verstecken" sie in der Eigenschaft originalEvent :). Ich erhalte also die Koordinaten des Berührungsendes von changedTouches[0].pageX und changedTouches[0].pageY und erhalte dann das Element, in dem der Finger freigegeben wird, mit document.elementFromPoint . (Bevor Sie diese Methode mit den Ereigniskoordinaten füttern, müssen Sie den Verschiebungsversatz zu x und y hinzufügen). Wenn das Element an diesem Punkt die Schaltfläche ist (oder ein Kind davon ist), behandle ich den Klick.
Jetzt habe ich ein neues Problem: In iOS werden die Click-Events irgendwie dupliziert. Aber das verdient eine andere Frage (wenn nicht schon vorhanden).
Sie brauchen einen anderen und saubereren Ansatz.
Implementieren Sie onmousemove und ontouchmove für Desktop- bzw. mobile Geräte.
%Vor%Implementieren Sie die Funktion "CancelOnClick", um das Flag von "presse" auf "normal" zu setzen. Es speichert Sie von all Ihren Elementen und deren Kind-basierten Bedingungen.
Ich hoffe, das hilft.
Tags und Links javascript jquery html5 touch mobile