Web-FrontendH5-TutorialImplementierung eines HTML5-Touch-Ereignisses zur Bestimmung der GleitrichtungImplementierung eines HTML5-Touch-Ereignisses zur Bestimmung der Gleitrichtung
In diesem Artikel werden hauptsächlich relevante Informationen zur Implementierung von HTML5-Touch-Ereignissen zur Bestimmung der Gleitrichtung vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden.
Um eine starke Unterstützung für Touch-Schnittstellen zu bieten, bieten Touch-Ereignisse die Möglichkeit, auf Benutzeroperationen auf dem Touchscreen oder Touchpad zu reagieren.
Schnittstelle
TouchEvent
TouchEvent ist eine Art Ereignis, das die Zustandsänderungen von Fingern auf der Touch-Ebene (Touchscreen, Touchpad usw.) beschreibt .). Diese Art von Ereignis wird verwendet, um einen oder mehrere Berührungspunkte zu beschreiben, sodass Entwickler die Bewegung von Berührungspunkten, die Zunahme und Abnahme von Berührungspunkten usw. erkennen können. Jedes Touch-Objekt stellt einen Berührungspunkt dar; jeder Berührungspunkt wird durch seine Position, Größe, Form, Druckstufe und Zielelement beschrieben. Das TouchList-Objekt stellt eine Liste mehrerer Berührungspunkte dar.
Arten von Berührungsereignissen
Um berührungsbezogene Zustandsänderungen zu unterscheiden, gibt es sind viele Arten von Berührungsereignissen. Sie können feststellen, um welchen Typ es sich bei dem aktuellen Ereignis handelt, indem Sie die TouchEvent.type-Eigenschaft des Berührungsereignisses überprüfen.
touchstart: Wird ausgelöst, wenn der Benutzer einen Berührungspunkt auf der Berührungsoberfläche platziert.
Touchend: Wird ausgelöst, wenn ein Berührungspunkt vom Benutzer von der Touchoberfläche entfernt wird (wenn der Benutzer einen Finger von der Touchoberfläche abhebt).
touchmove: Wird ausgelöst, wenn der Benutzer einen Berührungspunkt auf der Berührungsebene bewegt.
touchcancel: Wird ausgelöst, wenn der Kontakt aus irgendeinem Grund unterbrochen wird.
Gleitrichtung bestimmen
Das Grundprinzip besteht darin, die Koordinaten des Startgleitens (touchStart) zu erfassen und die Endgleitposition (touchEnd) und führen Sie dann relative Positionsberechnungen durch.
touchStart:function(e){
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
e = e || window.event;
},
touchEnd:function(e){
const that = this;
endX = e.changedTouches[0].pageX;
endY = e.changedTouches[0].pageY;
that.upOrDown(startX,startY,endX,endY);
},
upOrDown:function (startX, startY, endX, endY) {
const that = this;
let direction = that.GetSlideDirection(startX, startY, endX, endY);
switch(direction) {
case 0:
console.log("没滑动");
break;
case 1:
console.log("向上");
break;
case 2:
console.log("向下");
break;
case 3:
console.log("向左");
break;
case 4:
console.log("向右");
break;
default:
break;
}
},
//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
GetSlideDirection:function (startX, startY, endX, endY) {
const that = this;
let dy = startY - endY;
let dx = endX - startX;
let result = 0;
//如果滑动距离太短
if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
let angle = that.GetSlideAngle(dx, dy);
if(angle >= -45 && angle < 45) {
result = 4;
}else if (angle >= 45 && angle < 135) {
result = 1;
}else if (angle >= -135 && angle < -45) {
result = 2;
}
else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
}
return result;
},
//返回角度
GetSlideAngle:function (dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}
Native JS-Methode
Zusätzlich zu den neuen Methoden in H5, Sie Sie können auch natives JS verwenden, um die Gleitrichtung der Ansicht zu bestimmen. Der Code lautet wie folgt (kann direkt ausgeführt werden):
Es ist zu beachten, dass document.body.scrollTop von Chrome immer 0 ist und sein muss geändert zu document.documentElement.scrollTop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 脚本之家(jb51.net)</title>
<style>
p {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body style="overflow: scroll">
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<script>
function scroll( fn ) {
var beforeScrollTop = document.documentElement.scrollTop,
fn = fn || function() {};
console.log('beforeScrollTop',beforeScrollTop);
window.addEventListener("scroll", function() {
var afterScrollTop = document.documentElement.scrollTop,
delta = afterScrollTop - beforeScrollTop;
console.log('beforeScrollTop',beforeScrollTop);
console.log('afterScrollTop',afterScrollTop);
if( delta === 0 ) return false;
fn( delta > 0 ? "down" : "up" );
beforeScrollTop = afterScrollTop;
}, false);
}
scroll(function(direction) { console.log(direction) });
</script>
</body>
</html>
Verwandte Empfehlungen:
Das obligatorische Download-Attribut „Download“ in HTML5 verwendet
Zusammenfassung der Methoden zur Textausrichtung in HTML5 Canvas
Das obige ist der detaillierte Inhalt vonImplementierung eines HTML5-Touch-Ereignisses zur Bestimmung der Gleitrichtung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
H5: Erkundung der neuesten Version von HTMLMay 03, 2025 am 12:14 AMHtml5isamajorrevisionOfthehtmlStandardThatrevolutionizeswebdevelopmentByIntroducingNewsemanticelements und Kapabilität) iTenHancesCodereadability undseowithelemente -artig, und 2) html5 -zeitricher, interaktive Experien
Jenseits der Grundlagen: Fortgeschrittene Techniken im H5 -CodeMay 02, 2025 am 12:03 AMErweiterte Tipps für H5 umfassen: 1. Verwenden Sie komplexe Grafiken zum Zeichnen, 2. Verwenden Sie Webworker, um die Leistung zu verbessern. Diese Tipps helfen Entwicklern dabei, dynamischere, interaktivere und effizientere Webanwendungen zu erstellen.
H5: Die Zukunft von Webinhalten und DesignMay 01, 2025 am 12:12 AMH5 (HTML5) verbessert Webinhalte und Design durch neue Elemente und APIs. 1) H5 verbessert das semantische Tagging und die Multimedia -Unterstützung. 2) Es führt Leinwand und SVG ein und bereichert das Webdesign. 3) H5 arbeitet durch Erweiterung der HTML -Funktionalität durch neue Tags und APIs. 4) Die grundlegende Nutzung beinhaltet das Erstellen von Grafiken, und die erweiterte Nutzung umfasst Webstorageapi. 5) Entwickler müssen auf die Browserkompatibilität und die Leistungsoptimierung achten.
H5: Neue Funktionen und Funktionen für die WebentwicklungApr 29, 2025 am 12:07 AMH5 bringt eine Reihe neuer Funktionen und Fähigkeiten mit sich und verbessert die Interaktivität und Entwicklungseffizienz von Webseiten erheblich. 1. Semantische Tags wie Verbesserung der SEO. 2. Multimedia Support vereinfacht Audio- und Video -Wiedergabe durch und Tags. 3. Canvas Drawing bietet dynamische Grafikzeichnungswerkzeuge. 4. Lokaler Speicher vereinfacht die Datenspeicherung durch LocalStorage und SessionStorage. 5. Die Geolocation-API erleichtert die Entwicklung standortbasierter Dienste.
H5: Schlüsselverbesserungen bei HTML5Apr 28, 2025 am 12:26 AMHTML5 bringt fünf wichtige Verbesserungen mit sich: 1. Semantische Tags verbessern die Code -Klarheit und SEO -Effekte; 2. Multimedia Support vereinfacht Video- und Audio -Einbettung; 3. Form -Verbesserung vereinfacht die Überprüfung; 4. Offline und lokaler Speicher verbessert die Benutzererfahrung. 5. Leinwand- und Grafikfunktionen verbessern die Visualisierung von Webseiten.
HTML5: Der Standard und seine Auswirkungen auf die WebentwicklungApr 27, 2025 am 12:12 AMDie Kernmerkmale von HTML5 sind semantische Tags, Multimedia -Support, Offline -Speicher und lokaler Speicher sowie Form. 1. Semantische Tags wie usw., um die Code -Lesbarkeit und SEO -Effekt zu verbessern. 2. Vereinfachen Sie die Multimedia -Einbettung mit Etiketten. 3. Offline-Speicher und lokaler Speicher wie ApplicationCache und LocalStorage unterstützen den netzwerkfreien Betrieb und die Datenspeicherung. 4. Formularverbesserung führt neue Eingangstypen und Überprüfungseigenschaften ein, um die Verarbeitung und Überprüfung zu vereinfachen.
Beispiele für H5 -Code: Praktische Anwendungen und TutorialsApr 25, 2025 am 12:10 AMH5 bietet eine Vielzahl neuer Funktionen und Funktionen und verbessert die Fähigkeiten der Front-End-Entwicklung erheblich. 1. Multimedia-Unterstützung: Einbetten von Medien und Elementen, keine Plug-Ins sind erforderlich. 2. Leinwand: Verwenden Sie Elemente, um 2D -Grafiken und -Animationen dynamisch zu rendern. 3. Lokaler Speicher: Implementieren Sie die persistente Datenspeicherung über LocalStorage und SessionStorage, um die Benutzererfahrung zu verbessern.
Die Verbindung zwischen H5 und HTML5: Ähnlichkeiten und UnterschiedeApr 24, 2025 am 12:01 AMH5 und HTML5 sind verschiedene Konzepte: HTML5 ist eine Version von HTML, die neue Elemente und APIs enthält. H5 ist ein Rahmen für mobile Anwendungsentwicklungen, die auf HTML5 basieren. HTML5 pariert und rendert Code über den Browser, während H5 -Anwendungen Container ausführen und über JavaScript mit nativem Code interagieren müssen.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
MantisBT
Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
mPDF
mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),
Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
