Ausführliche Erläuterung der Verwendung von Click-, Touch- und Tap-Ereignissen in der mobilen WEB-Entwicklung

Dieses Mal werde ich Ihnen die Verwendung von Click-, Touch- und Tap-Ereignissen in der mobilen WEB-Entwicklung ausführlich erläutern. Vorsichtsmaßnahmen für die Verwendung von Click-, Touch- und Tap-Ereignissen Tippen Sie auf Ereignisse in der mobilen WEB-Entwicklung. Was sind die folgenden? 1. Vergleich von Klicken und Tippen

Beide werden beim Klicken ausgelöst, aber auf der mobilen WEB-Seite wird das Klicken

200–300 ms, daher verwenden Sie bitte als Klickereignis „Tap“ statt „Click“.

SingleTap und DoubleTap Stellt Einzelklick bzw. Doppelklick dar.

2. Bezüglich der Tap-Click-Verarbeitung

Verwenden Sie das Tap des Zepto-Frameworks, um das Click-Ereignis im Gerätebrowser zu verschieben, um zu vermeiden, dass Die Reaktion des Klickereignisses verzögert sich, es kann zu einer Click-Through-Situation kommen, das heißt, der Klick löst ein Klickereignis auf einer nicht aktuellen Ebene aus.

Verarbeitungsmethode:

(1),

Auf Github gibt es eine Bibliothek namens fastclick, die auch die verzögerte Reaktion von Klickereignissen auf Mobilgeräten umgehen kann, https:// github.com/ftlabs/fastclick
Fügen Sie es mithilfe von Skript-Tags in die Seite ein (diese Bibliothek unterstützt AMD, sodass Sie auch AMD-Spezifikationen befolgen können, z. B. require.js-Modullader) und initialisieren Sie es im Körper, wenn der Dom bereit ist, wie zum Beispiel:

$(function(){
    newFastClick(document.body);
})

Binden Sie dann das Klickereignis an das Element, das „nein“ erfordert Verzögerungsklick“ (Beachten Sie, dass es sich nicht mehr um das an Zepto gebundene Tap-Ereignis handelt). Natürlich können Sie es auch nicht auf dem Körper, sondern auf einem bestimmten Dom initialisieren. Auf diese Weise können nur dieser Dom und seine Unterelemente „verzögerungsfreie“ Klicks genießen

In der praktischen Entwicklung haben wir festgestellt, dass die Klick-Reaktionsgeschwindigkeit etwas schneller ist als die des Tippens, wenn das Element an Fastclick gebunden ist. Haha

(2), binden Sie das Touchend-Ereignis an das Element und fügen Sie e hinzu.preventDefault();

$demo.on('touchend',function(e){//改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发
    $demo.hide()
    e.preventDefault();//阻止“默认行为”
})

<p style='font-size: 14px; color: rgb(117, 117, 117); line-height: 15.3906px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; margin: 0px !important; padding: 0px 1em !important; border: 0px !important; vertical-align: baseline !important; float: none !important; overflow: visible !important; white-space: pre !important; text-align: left;'><code style="font-size:1em !important;line-height:1.1em !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;color:#000000 !important;display:inline !important;margin:0px !important;padding:0px !important;border:0px !important;vertical-align:baseline !important;float:none !important;overflow:visible !important;"><span style='font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px;'></span>

3. Touch-Event Touch ist ein Touch-Event auf einem Touchscreen-Mobiltelefon. Die meisten Webkit-Kernel für Touchscreen-Mobiltelefone bieten heutzutage eine Überwachung von Berührungsereignissen, sodass Entwickler einige Informationen erhalten können, wenn Benutzer den Bildschirm berühren.

Einschließlich: Touchstart, Touchmove, Touchend, Touchcancel Diese vier Ereignisse

Touchstart-, Touchmove- und Touchend-Ereignisse können analog zum Auslösen von Mousedown, Mouseover
und Mouseup sein.

Touchstart: Wird ausgelöst, wenn der Finger den Bildschirm berührt.

Touchmove: Wird ausgelöst, wenn sich der Finger auf dem Bildschirm bewegt >

Touchend: Es wird ausgelöst, wenn der Finger den Bildschirm verlässt.

und Touchcancel. Viele Leute wissen nicht, wann es ausgelöst wird, und ignorieren es. Tatsächlich wird Touchcancel ausgelöst, wenn Ihr Finger den Bildschirm nicht verlassen hat, wenn ein Vorgang auf Systemebene erfolgt, z. B. Warn- und Bestätigungs-Popups oder Funktions-Popups des

Android-Systems.

Die auslösende Reihenfolge dieser vier Ereignisse ist:

touchstart -> touchmove

-> …… -> touchmove ->touchend

Aber die Überwachung des oben genannten einzelnen Ereignisses allein reicht für uns nicht aus, um die Überwachung einiger häufiger Gesten Vorgänge auf Touchscreen-Telefonen abzuschließen, wie z. B. Doppelklick, langes Drücken, links und rechts Schieben, Zoomen und andere Gesten funktionieren. Es ist notwendig, die Überwachung dieser Ereignisse zu kombinieren, um diese Art von Gestenaktion zu kapseln.

Tatsächlich haben viele Frameworks auf dem Markt diese Gesten für mobile Browser gekapselt, wie z. B. jqmobile, zepto und jqtouch. Bei einigen Android-Systemen passierte jedoch eine Tragödie Ich selbst In Android 4.0.x können Touchmove- und Touchend-Ereignisse nicht gut ausgelöst werden:

Zum Beispiel, wenn ein Finger die Seite von oben nach unten auf dem Bildschirm zieht , theoretisch löst Ja einen Touchstart aus , viele Male Touchmove
und das letzte Touchend, aber unter Android 4.0 wird Touchmove nur einmal ausgelöst, die Auslösezeit ist ungefähr die gleiche wie bei Touchstart
und Touchend wird nicht direkt ausgelöst. Dies ist ein sehr schwerwiegender Fehler Derzeit habe ich nur festgestellt, dass dieser Fehler in Android 4.0 vorhanden ist, und es wird gesagt, dass die iOS 3.x-Version ihn auch haben wird.

Offensichtlich sind sich jqmobile, zepto usw. der schwerwiegenden Auswirkungen dieses Fehlers auf die Überwachungsimplementierung nicht bewusst, sodass bei direkter Verwendung der Ereignisse dieser Frameworks mehr oder weniger auftreten weniger Kompatibilitätsproblem!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Häufig verwendete

So verwenden Sie JS, um Funktionsparameternamen zu erhalten

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von Click-, Touch- und Tap-Ereignissen in der mobilen WEB-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!