Lösung für den Konflikt zwischen Touchstart-Ereignis und Klickereignis in JS

In diesem Artikel wird Ihnen hauptsächlich die Lösung des Konflikts zwischen Touchstart-Ereignis und Klickereignis in JS vorgestellt. Die Lösungsmethode wird anhand von Beispielcodes ausführlich vorgestellt, die für alle, die sie benötigen, einen gewissen Referenzwert haben Bitte folgen Sie dem Herausgeber, um gemeinsam zu lernen.

Vorwort

Mobiles Internet ist der zukünftige Entwicklungstrend. Jetzt kämpfen viele inländische Internetgiganten um den mobilen Kuchen, wie WeChat Alipay und Alipay sind derzeit relativ erfolgreiche Beispiele, und natürlich gibt es diverse APP- und Webanwendungen.

Der folgende Artikel stellt hauptsächlich den relevanten Inhalt zur Konfliktlösung zwischen Touchstart-Ereignis und Klickereignis in JS vor. Ich werde im Folgenden nicht viel sagen, werfen wir einen Blick auf die detaillierte Einführung.

1. Beschreibung des Geschäftsszenarios

Bei der Anpassung der fertigen PC-Site an das mobile Endgerät möchten wir, dass die Site eine Schnellere Reaktionsgeschwindigkeit auf Mobilgeräten, um Benutzern ein besseres Erlebnis zu bieten. Zu diesem Zeitpunkt sollten wir ein mobilgerätespezifisches Ereignissystem verwenden, beispielsweise das Touchstart-Ereignis anstelle des Klickereignisses.

Warum sollte das besser sein? Gemäß der Beschreibung in der Google-Entwicklerdokumentation:

Browser auf Mobilgeräten verzögern das Klickereignis um 300 ms, wenn es ausgelöst wird, um sicherzustellen, dass es sich um ein „Klick“-Ereignis und nicht um ein „Doppelklick“-Ereignis handelt .
Beim Touchstart-Ereignis wird das gebundene Ereignis in dem Moment ausgelöst, in dem der Finger des Benutzers den Bildschirm berührt. Daher besteht die Bedeutung der Verwendung von Touchstart als Ersatz für das Klickereignis darin, Benutzern zu helfen, bei jedem Klick 300 ms einzusparen. Es ist sehr wichtig, diese Technologie in Situationen zu verwenden, in denen die Seite häufig Klicks erfordert oder die Klicks während Animationen erfolgen und hohe Anforderungen an die Animationsflüssigkeit gestellt werden.

Kehren wir jedoch zu unserem Ausgangsszenario zurück. Wenn die PC-Site an die mobile Seite angepasst wird, können wir die Touchstart- und Click-Ereignisse nicht einfach ersetzen, da der PC das Touchstart-Ereignis nicht erkennt.

2. Gründe für Konflikte

Natürlich können wir Touchstart und Click gleichzeitig an ein Element binden Dies führt jedoch zu dem in diesem Artikel gelösten Problem – die beiden Ereignisse werden auf Mobilgeräten in Konflikt geraten.

Da mobile Geräte gleichzeitig Touchstart- und Klickereignisse erkennen können, werden nacheinander das Touchstart-Ereignis und das an das Zielelement gebundene Klickereignis (ca. 300 ms später) ausgelöst, wenn der Benutzer auf das Zielelement klickt Das heißt, die von uns gebundene Rückruffunktion wird zweimal ausgeführt! . Dies ist offensichtlich nicht das Ergebnis, das wir wollen.

3· Lösung

Für diese Situation gibt es die folgenden zwei Lösungen:

(1) PreventDefault verwenden

Die erste Lösung besteht darin, die PreventDefault-Methode im Ereignisobjekt zu verwenden. Die Funktion der PreventDefault-Methode besteht darin, das Auftreten des Standardereignisverhaltens des Elements zu verhindern Es ist interessant. Ja, wenn wir Touchstart- und Click-Ereignisse gleichzeitig an das Zielelement binden, kann die Verwendung dieser Methode in der Touchstart-Ereignis-Rückruffunktion verhindern, dass nachfolgende Click-Ereignisse auftreten.

Das macht keinen Sinn, schließlich ist das von uns hinzugefügte Klickereignis nicht das „Standardereignis“ des Elements, aber es funktioniert, oder mit anderen Worten, es wird vom Browser implementiert, sodass wir es verwenden können Diese Methode löst den Konflikt zwischen Touchstart-Ereignis und Klickereignis auf Mobilgeräten. Der spezifische Code lautet wie folgt:

const Button = document.getElementById("targetButton")
Button.addEventListener("touchstart", e => {
 e.preventDefault()
 console.log("touchstart event!")
})
 
Button.addEventListener("click", e => {
 e.preventDefault()
 console.log("click event!")
})

Wenn Sie nach der Simulation auf das Ziel klicken Auf dem Browserelement sehen Sie nur das Touchstart-Ereignisfeld. Offensichtlich wurde das Klickereignis erfolgreich blockiert.

Zusammenfassung

Der Vorteil dieser Methode besteht darin, dass sie einfach und grob, direkt und effektiv ist und unsere Ziele gut erreichen kann, aber der Nachteil ist, dass die Die Methode „preventDefault“ verhindert das Klickereignis. Die Methode basiert auf der Browser-Implementierung und nicht auf dem Prinzip „preventDefault“, was eine gewisse Unsicherheit mit sich bringt, obwohl ich noch kein bestimmtes Szenario gefunden habe, in dem diese Methode fehlschlägt.

(2) Funktionsbasierte Erkennung von Bindungsereignissen

Wir können das Klickereignis des Elements kapseln, indem wir beurteilen, ob der Browser das Touchstart-Ereignis unterstützt, sodass das client will Die Umgebung bestimmt den Ereignistyp, an den das Element gebunden werden soll. Der Code lautet wie folgt:

const Button = document.getElementById("targetButton")
const clickEvent = (function() {
 if ('ontouchstart' in document.documentElement === true)
 return 'touchstart';
 else
 return 'click';
})();
 
Button.addEventListener(clickEvent, e => {
 console.log("things happened!")
})

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Beispielcode zum Implementieren von Fingerzoombildern im WeChat-Applet

Basierend auf dem CSS-Vorladen in Vue Detailliert Erläuterung der Konfigurationsmethode mit Sass

Angular 4.x+Ionic3 Fallstrick Ionic3.x Pop Reverse Value Transfer Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonLösung für den Konflikt zwischen Touchstart-Ereignis und Klickereignis in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!