Implementierung des Seitenumblättereffekts durch Gleiten und des Klickereignisproblems auf dem mobilen Endgerät

vorgenannt

Dieser Artikel ist sehr kurz~
Der Hauptzweck besteht darin, ein Problem zusammenzufassen und zu beschreiben, das durch den Klick- und JS-Ereignismechanismus auf dem mobilen Endgerät verursacht wird.
(: Ähm, eigentlich muss ich einen Artikel schreiben, wenn ich ihn in ein paar Sätzen beenden kann. Ich bin es wert…

Text

Ich habe vor Kurzem eine kleine Aktivität gemacht, bei der ein Effekt erforderlich war: das Schieben zum Umblättern von Seiten . Wahrscheinlich ist es so:

<!-- HTML-Code -->
<div Klasse="Seitencontainer">
	<div Klasse="Seite" Stil="Hintergrund: #dc3b26">1</div>
	<div Klasse="Seite" Stil="Hintergrund: #f3b03d">2</div>
	<div Klasse="Seite" Stil="Hintergrund: #44a2f8">3</div>
</div>

Da wir in CSS zum Umblättern die Seiten verschieben, müssen wir zunächst sicherstellen, dass „immer nur ein Bildschirm vorhanden ist“, was im globalen Stylesheet gesteuert werden kann. Anschließend muss „jede Seite“ das gesamte übergeordnete Element einnehmen. Hier verwenden wir tatsächlich die Funktion „div ist ein Blockelement, das ohne externe Kraft vertikal angeordnet wird“.

/** CSS-Stil */
html,
Körper{
	Rand: 0;
	Polsterung: 0;
	Breite: 100 %;
	Höhe: 100vh;
	Überlauf: versteckt;
	Schriftgröße: 60px;
}
.Seitencontainer{
	Breite: 100 %;
	Höhe: 100%;
}
.Seitencontainer .Seite{
	Breite: 100 %;
	Höhe: 100%;
}

Auch die JS-Implementierung ist sehr einfach: Da sie sich auf dem mobilen Endgerät befindet, werden touchstart , touchmove und touchend verwendet, um die Gesten-Gleitfunktion zu implementieren:

• Notieren Sie beim Starten (gerade gedrückt) die Fingerposition zu diesem Zeitpunkt – als Anfangswert;
• Beim Bewegen (Berühren und Gleiten) wird die Anforderungsbeurteilung entsprechend der Echtzeit-Fingerposition und der anfänglichen Fingerpositionsvariablen durchgeführt. In dem in diesem Artikel dargestellten Szenario erfordert dieser Schritt im Allgemeinen auch die Echtzeitzuweisung der „Bewegungsdistanz“.
• Am Ende (Finger geht) (oder direkt bei der Bewegung) werden Abschlussarbeiten ausgeführt – Beispiel: Das Bild gleitet vollständig rüber, das Element bewegt sich an die Endposition und der Ereignislistener wird abgebrochen;

// Hier ist die Datei, die das globale js steuert // Verhindert global das Standardverhalten des Browsers document.addEventListener("touchstart",function(e){
	wenn(e.stornierbar){
		e.preventDefault();
	}
},{passiv: false})
// {passive: false} teilt dem vorherigen Code mit, dass es möglicherweise notwendig sein könnte, das Verhalten zurückzusetzen document.addEventListener("touchmove",function(e){
	wenn(e.stornierbar){
		e.preventDefault();
	}
},{passiv: false})

// JavaScript-Code let curPageIndex=0;
let pageContainer = document.querySelector(".page-container");
let pageNumber=pageContainer.children.length; //Anzahl der Seiten// Höhe des Dokumentfensters (hier ist die Höhe eines Bildschirms)
let cHeight=document.documentElement.clientHeight;
// Setzen Sie den oberen Rand des Seitencontainers auf einen geeigneten Wert, sodass er in der Ansichtsfunktion toPage(){ angezeigt wird.
	pageContainer.style.transition="alle 0,5 Sekunden einfach";
	pageContainer.style.marginTop=-curPageIndex*cHeight+"px";
	
	// Entfernen Sie den Übergangseffekt, nachdem die Änderung abgeschlossen ist!
	pageContainer.addEventListener("Übergangsende",Funktion(){
		pageContainer.style.transition="keine";
	},{einmal:wahr})
}
zuSeite()

pageContainer.ontouchstart=Funktion(e){
	let y=e.changedTouches[0].clientY; //Die vertikale Koordinate des mit dem Finger gedrückten Seitencontainer.ontouchmove=function(e){
		let dis=e.changedTouches[0].clientY-y; //Abstand berechnen // Oberen Rand des Seitencontainers berechnen
		let mtop=-curPageIndex*cHeight+dis
		wenn(mtop>0){
			mtop=0;
		}sonst wenn(mtop<-(Seitennummer-1)*cHöhe){
			mtop=-(Seitennummer-1)*cHöhe;
		}
		//Position in Echtzeit ändern pageContainer.style.marginTop=mtop+"px";
	}
	pageContainer.ontouchend=Funktion(e){
		let dis = e.changedTouches[0].clientY-y;
		// Wenn die Gleitstrecke zu kurz ist, kehre zur Position vor dem Gleiten zurück if(Math.abs(dis)<=60){
			zuSeite()
		}sonst wenn(dis>0 && curPageIndex>0){
			aktuellerSeitenindex--;
			zuSeite()
		}sonst wenn(dis<0 && aktuellerSeitenindex<Seitennummer-1){
			aktuellerSeitenindex++;
			zuSeite()
		}
		
		//Nachdem der Finger gegangen ist, brechen Sie das Überwachungsereignis ab pageContainer.ontouchmove=null;
		pageContainer.ontouchend=null;
	}
}

Bisher scheint die Funktionalität perfekt. Aber dieses Mal fügen wir der ersten Seite eine Schaltfläche hinzu:

<div Klasse="Seite" Stil="Hintergrund: #dc3b26">
	<button onclick="alert('哈哈哈哈')" class="but">klick mich!</button>
	1
</div>

Gehen Sie dann auf die Seite, um den Effekt zu sehen:

ungültig!

Dies liegt daran, dass wir oben in der globalen JS-Datei den Code zum „Verhindern von Browser-Standardereignissen“ hinzugefügt haben.
——In mobilen Browsern werden das Klickereignis und das Mausstartereignis gleichzeitig ausgelöst. Da mobile Browser keine Klickereignisse kennen, werden diese durch Mausereignisse simuliert! : Aus diesem Grund tritt das sogenannte Problem der „300 ms-Verzögerung in mobilen Browsern“ auf1 ^{.
——Außerdem gibt es im mit WeChat gelieferten Browser eine Operation namens „Oben berühren und nach unten ziehen, um neu zu springen“, die eigentlich nicht zulässig ist. Es ist auch ein Standardereignis des Browsers.
Also müssen wir diese Dinge grundsätzlich verbieten.}

Aber wie oben gezeigt, wird ein umfassendes Verbot immer zu Problemen führen. Was sollen wir tun?
H5 bietet „benutzerdefinierte Attribute“. Für die Methode in diesem Artikel können wir vollständig erkennen, ob das aktuell ausgelöste Element ein bestimmtes benutzerdefiniertes Attribut im globalen Ereignis hat. Wenn dies der Fall ist, tun Sie nichts; andernfalls führen Sie den Code aus, der das Standardverhalten untersagt:
Zum Beispiel

<button data-default="true" onclick="alert('哈哈哈哈')" class="but">klick mich!</button>

Ändern Sie den Inhalt der obigen „Datei, die globale js steuert“ wie folgt:

// Standardverhalten des Browsers global verhindern document.addEventListener("touchstart",function(e){
	wenn(e.target.dataset.default){
		zurückkehren;
	}
	wenn(e.stornierbar){
		e.preventDefault();
	}
},{passiv: false})
document.addEventListener("touchmove",Funktion(e){
	wenn(e.target.dataset.default){
		zurückkehren;
	}
	wenn(e.stornierbar){
		e.preventDefault();
	}
},{passiv: false})

Es ist OK:

Tatsächlich gibt es noch eine andere „Lösung“: Wie oben erwähnt, wird der mobile Klick tatsächlich durch das Mausereignis simuliert, sodass wir mit dem Mousestart-Ereignis beginnen können. Und da das Schaltflächenelement ein (untergeordnetes) Element auf der „ersten Seite“ ist, können wir die Methode verwenden , um das Aufsteigen des Ereignisses zu verhindern :

<!-- Button ist ein normaler Button -->
<button class="but">klick mich!</button>

document.querySelector(".but").addEventListener("touchstart",function(e){
	e.stopPropagation();
	alert('Alarmwarnung');
},FALSCH) 

Über Capture und Bubbling→

Als erstes müssen wir wissen, dass wenn wir mit der Maus eine Taste drücken, es sich nicht um ein „Klicken auf eine Taste“ handelt, sondern dass die Maus (die Taste darauf) in diesem Bereich gedrückt wird und das Betriebssystem und der Browser diese Information dem „Tasten“-Bereich zuordnen und deren Logik auslösen.
Tatsächlich gibt es für Mausklicks keine Positionsinformationen. Das Betriebssystem überwacht ständig die Bewegung der Maus, berechnet die Koordinaten basierend auf der akkumulierten Verschiebung und übergibt sie an den Browser.
Der Vorgang der Umwandlung dieser Koordinate in ein Ereignis auf einem bestimmten Element kann dann als „ Erfassung “ bezeichnet werden. Und was ist mit „ Blubbern “? Das ist schwer zu erklären, aber ich glaube, Sie verstehen eines: Wenn Sie den TV-Schalter drücken, drücken Sie auch den Fernseher!
Dies wird in vielen Artikeln als „der Blasenbildungsprozess erfolgt von innen nach außen und der Aufnahmeprozess von außen nach innen“ oder als „Zwiebelmodell“ bezeichnet.
Ein weiterer Punkt ist: Der dritte Parameter true/false des Ereignisses addEventListener bedeutet „Capture/Bubble“. (Denken Sie nicht zu viel darüber nach, dies ist nur eines der vom Browser bereitgestellten Ereignismodelle. Unabhängig davon, ob Sie zuhören oder nicht, erfolgen Erfassung und Sprudeln immer nacheinander, wenn ein Ereignis eintritt.)

Dies ist das Ende dieses Artikels über die Implementierung von gleitenden Seitenumblättereffekten und Klickereignisproblemen auf mobilen Endgeräten. Weitere relevante Inhalte zu gleitenden Seitenumblättereffekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!