Touch-Events in der mobilen Webentwicklung (ausführliches Tutorial)
Im Folgenden werde ich Ihnen eine detaillierte Erläuterung von Touch-Event-Beispielen in der mobilen Webentwicklung geben. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.
Vorherige Wörter
Um Entwicklern einige besondere Informationen zu übermitteln, hat Safari für iOS einige neue exklusive Events hinzugefügt. Da iOS-Geräte weder über eine Maus noch über eine Tastatur verfügen, reichen normale Maus- und Tastaturereignisse bei der Entwicklung interaktiver Webseiten für mobile Safari einfach nicht aus. Mit der Hinzufügung von WebKit in Android wurden viele dieser proprietären Ereignisse zu De-facto-Standards, was das W3C dazu veranlasste, mit der Entwicklung der Touch Events-Spezifikation zu beginnen. In diesem Artikel wird das mobile Touch-Event im Detail vorgestellt
Übersicht
Als das iPhone 3G mit iOS 2.0-Software veröffentlicht wurde, enthielt es auch eine neue Version des Safari-Browsers . Diese neue mobile Safari bietet einige neue Ereignisse im Zusammenhang mit Touch-Bedienungen. Später implementierten auch Browser auf Android das gleiche Ereignis. Berührungsereignisse werden ausgelöst, wenn der Benutzer seinen Finger auf den Bildschirm legt, ihn über den Bildschirm bewegt oder ihn vom Bildschirm wegbewegt. Im Einzelnen gibt es die folgenden Berührungsereignisse
touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发 touchmove:当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动 touchend:当手指从屏幕上移开时触发 touchcancel:当系统停止跟踪触摸时触发(不常用)。关于此事件的确切触发时间，文档中没有明确说明
[touchenter und touchleave]
Die Berührungsereignisspezifikation umfasste einst Touchenter- und Touchleave-Ereignisse. Diese beiden Ereignisse treten auf, wenn sich der Finger des Benutzers hinein- oder herausbewegt Ein bestimmter Bereich wird ausgelöst, wenn Elemente vorhanden sind. Aber diese beiden Ereignisse wurden nie realisiert. Microsoft bietet alternative Ereignisse für diese beiden Ereignisse an, diese werden jedoch nur vom IE unterstützt. In einigen Fällen ist es sehr nützlich zu wissen, ob der Finger des Benutzers in ein Element hinein- und herausgleitet. Daher hoffe ich, dass diese beiden Ereignisse zur Norm zurückkehren können
Bei Berührungsereignissen werden am häufigsten Touchstart, touchumove und Die drei Ereignisse von touchend entsprechen den Mausereignissen wie folgt
鼠标 触摸 mousedown touchstart mousemove touchmove mouseup touchend
[Hinweis] Einige Versionen des Touch-Ereignisses unter dem Chrome-Simulator verwenden den DOM-Level-0-Ereignishandler, um ungültige Ereignisse hinzuzufügen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#test{height:200px;width:200px;background:lightblue;}
</style>
</head>
<body>
<p id="test"></p>
<script>
(function(){
var
stateMap = {
touchstart_index : 0,
touchmove_index : 0,
touchend_index : 0
},
elesMap = {
touch_obj: document.getElementById('test')
},
showIndex, handleTouch;
showIndex = function ( type ) {
elesMap.touch_obj.innerHTML = type + ':' + (++stateMap[type + '_index']);
};
handleTouch = function ( event ) {
showIndex( event.type );
};
elesMap.touch_obj.addEventListener('touchstart', function(event){handleTouch(event);});
elesMap.touch_obj.addEventListener('touchmove', function(event){handleTouch(event);});
elesMap.touch_obj.addEventListener('touchend', function(event){handleTouch(event);});
})();
</script>
</body>
</html>300 ms
Das 300-ms-Problem besteht darin, dass zwischen der Ausführung seiner Funktion durch ein Element und der Ausführung des Berührungsereignisses ein Intervall von 300 Millisekunden liegt. Im Vergleich zu Berührungsereignissen, Mausereignissen, Fokusereignissen, Browser-Standardverhalten usw. haben alle eine Verzögerung von 300 ms
【Durchklicken】
Aufgrund der Existenz von 300 ms kommt es zu häufigen Verzögerungen Klicken Sie sich durch die Frage. Schauen wir uns zuerst das Beispiel an
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#test {position: absolute;top: 0;left: 0;opacity: 0.5;height: 200px;width: 200px;background: lightblue;}
</style>
</head>
<body>
<a href="https://baidu.com">百度</a>
<p id="test"></p>
<script>
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
fnHide, onTouch;
fnHide = function (type) {
elesMap.touchObj.style.display = 'none';
};
onTouch = function (event) {
fnHide();
};
elesMap.touchObj.addEventListener('touchstart', function(event){onTouch(event);});
})();
</script>
</body>
</html>Nachdem auf das hellblaue durchscheinende p geklickt wurde (was das Berührungsereignis auslöst) und die Klickposition direkt über dem Link liegt, wird das Standardverhalten des Linksprungs ausgelöst. Die detaillierte Erklärung lautet, dass der Browser nach dem Klicken auf die Seite die Koordinaten der angeklickten Seite aufzeichnet und das Element 300 ms später an diesen Koordinaten gefunden wird. Klickverhalten für dieses Element auslösen. Wenn also das obere Element derselben Seitenkoordinate innerhalb von 300 ms verschwindet, wird 300 ms später ein Klickverhalten auf dem unteren Element ausgelöst. Dies führt zu einem Klickproblem
Dieses Problem wird dadurch verursacht, dass das Verhalten beim Berühren des Bildschirms überlastet ist. In dem Moment, in dem der Finger den Bildschirm berührt, kann der Browser nicht vorhersagen, ob der Benutzer tippt, zweimal tippt, wischt, hält oder eine andere Operation ausführt. Das Einzige, was sicher ist, ist, eine Weile zu warten und abzuwarten, was als nächstes passiert
Das Problem ist Double-Tap. Selbst wenn der Browser erkennt, dass der Finger vom Bildschirm abgehoben wurde, weiß er immer noch nicht, was als nächstes zu tun ist. Weil der Browser nicht wissen kann, ob der Finger wieder zum Bildschirm zurückkehrt oder ob er das Tippereignis und die Ereigniskaskade auslöst. Um dies festzustellen, muss der Browser eine kurze Zeit warten. Browserentwickler haben ein optimales Zeitintervall gefunden, das 300 Millisekunden beträgt
[Lösung]
1 Fügen Sie eine Verzögerung von 300 ms im Ereignishandler des Berührungsereignisses hinzu
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
fnHide, onTouch;
fnHide = function (type) {
elesMap.touchObj.style.display = 'none';
};
onTouch = function (event) {
setTimeout(function(){
fnHide();
},300);
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();2. Verwenden Sie eine Beschleunigungsanimation und fügen Sie einen 300-ms-Übergangseffekt hinzu.
3 Fügen Sie das Dom-Element der mittleren Ebene hinzu, damit die mittlere Ebene das Penetrationsereignis akzeptiert und es später ausblendet
4. Sowohl die obere als auch die untere Ebene verwenden Tap-Ereignisse, aber das Standardverhalten ist unvermeidlich 5. Das Touchstart-Ereignis im Dokument verhindert das Standardverhalten.document.addEventListener('touchstart',function(e){
e.preventDefault();
})a.addEventListener('touchstart',function(){
window.location.href = 'https://cnblogs.com';
})el.addEventListener('touchstart',function(e){
e.stopPropagation();
})Ereignisobjekt
【 Grundlegende Informationen wiederherzustellen 】Das Ereignisobjekt jedes Berührungsereignisses stellt allgemeine Attribute in Mausereignissen bereit, einschließlich Ereignistyp, Ereigniszielobjekt, Ereignissprudeln, Ereignisfluss, Standardverhalten usw.Nehmen Sie Touchstart als Der Beispielcode lautet beispielsweise wie folgt:<script>
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
onTouch;
onTouch = function (e) {
console.log(e)
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();
</script>//当前目标 currentTarget:[object HTMLpElement] //实际目标 target:[object HTMLpElement] //实际目标 srcElement:[object HTMLpElement]
//事件流 eventPhase: 2 //可冒泡 bubbles: true //默认事件可取消 cancelable: true
除了常见的DOM属性外，触摸事件对象有一个touchList数组属性，其中包含了每个触摸点的信息。如果用户使用四个手指触摸屏幕，这个数组就会有四个元素。一共有三个这样的数组
1、touches：当前触摸屏幕的触摸点数组（至少有一个触摸在事件目标元素上）
2、changedTouches ：导致触摸事件被触发的触摸点数组
3、targetTouches：事件目标元素上的触摸点数组
如果用户最后一个手指离开屏幕触发touchend事件，这最后一个触摸点信息不会出现在targetTouches和touches数组中，但是会出现在changedTouched数组中。因为是它的离开触发了touchend事件，所以changedTouches数组中仍然包含它。上面三个数组中，最常用的是changedTouches数组
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
onTouch;
onTouch = function (e) {
elesMap.touchObj.innerHTML = 'touches:' + e.touches.length
+ '<br>changedTouches:' + e.changedTouches.length
+ '<br>targetTouches:' + e.targetTouches.length;
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();【事件坐标】
上面这些触摸点数组中的元素可以像普通数组那样用数字索引。数组中的元素包含了触摸点的有用信息，尤其是坐标信息。每个Touch对象包含下列属性
clientx:触摸目标在视口中的x坐标 clientY:触摸目标在视口中的y坐标 identifier:标识触摸的唯一ID pageX:触摸目标在页面中的x坐标（包含滚动） pageY:触摸目标在页面中的y坐标（包含滚动） screenX:触摸目标在屏幕中的x坐标 screenY:触摸目标在屏幕中的y坐标 target:触摸的DOM节点目标
changedTouches数组中的第一个元素就是导致事件触发的那个触摸点对象(通常这个触摸点数组不包含其他对象)。这个触摸点对象含有clientX/Y和pageX/Y坐标信息。除此之外还有screenX/Y和x/y，这些坐标在浏览器间不太一致，不建议使用
clientX/Y和pageX/Y的区别在于前者相对于视觉视口的左上角，后者相对于布局视口的左上角。布局视口是可以滚动的
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
onTouch;
onTouch = function (e) {
var touch = e.changedTouches[0];
elesMap.touchObj.innerHTML = 'clientX:' + touch.clientX + '<br>clientY:' + touch.clientY
+ '<br>pageX:' + touch.pageX + '<br>pageY:' + touch.pageY
+ '<br>screenX:' + touch.screenX + '<br>screenY:' + touch.screenY
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在angularjs中使用$http实现异步上传Excel文件方法
Das obige ist der detaillierte Inhalt vonTouch-Events in der mobilen Webentwicklung (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Kann der Appdata-Ordner auf das Laufwerk D verschoben werden?
Feb 18, 2024 pm 01:20 PM
Kann der Appdata-Ordner auf das Laufwerk D verschoben werden? Mit zunehmender Beliebtheit der Computernutzung werden immer mehr persönliche Daten und Anwendungen der Benutzer auf dem Computer gespeichert. Im Windows-Betriebssystem gibt es einen speziellen Ordner namens Appdata-Ordner, der zum Speichern der Anwendungsdaten des Benutzers verwendet wird. Viele Benutzer fragen sich, ob dieser Ordner aus Datenverwaltungs- und Sicherheitsgründen auf das Laufwerk D oder andere Datenträger verschoben werden kann. In diesem Artikel werden wir dieses Problem diskutieren und einige Lösungen anbieten. Lassen Sie mich zuerst
Vergleich des Python-Webentwicklungs-Frameworks: Django vs. Flask vs. FastAPI
Sep 28, 2023 am 09:18 AM
Vergleich der Python-Webentwicklungs-Frameworks: DjangovsFlaskvsFastAPI Einführung: In Python, einer beliebten Programmiersprache, stehen viele hervorragende Webentwicklungs-Frameworks zur Auswahl. Dieser Artikel konzentriert sich auf den Vergleich dreier beliebter Python-Web-Frameworks: Django, Flask und FastAPI. Durch den Vergleich ihrer Funktionen, Nutzungsszenarien und Codebeispiele können Leser besser das Framework auswählen, das ihren Projektanforderungen entspricht. 1. Django
6000 mAh Silizium-Minusbatterie! Xiaomi 15Pro-Upgrade erneut durchgesickert
Jul 24, 2024 pm 12:45 PM
Laut Nachrichten vom 23. Juli verbreitete der Blogger Digital Chat Station die Nachricht, dass die Akkukapazität des Xiaomi 15 Pro auf 6000 mAh erhöht wurde und das kabelgebundene Blitzladen mit 90 W unterstützt. Dies wird das Pro-Modell mit dem größten Akku in der digitalen Serie von Xiaomi sein. Digital Chat Station enthüllte zuvor, dass der Akku des Xiaomi 15Pro eine extrem hohe Energiedichte aufweist und der Siliziumgehalt viel höher ist als bei Konkurrenzprodukten. Nachdem im Jahr 2023 siliziumbasierte Batterien in großem Maßstab getestet werden, wurden Siliziumanodenbatterien der zweiten Generation als zukünftige Entwicklungsrichtung der Branche identifiziert. Dieses Jahr wird der Höhepunkt des direkten Wettbewerbs einläuten. 1. Die theoretische Grammkapazität von Silizium kann 4200 mAh/g erreichen, was mehr als dem Zehnfachen der Grammkapazität von Graphit entspricht (die theoretische Grammkapazität von Graphit beträgt 372 mAh/g). Für die negative Elektrode beträgt die Kapazität, wenn die Lithiumioneneinfügungsmenge das Maximum erreicht, die theoretische Grammkapazität, was bedeutet, dass sie bei gleichem Gewicht erfolgt
Stoppen Sie oder erlauben Sie diesem PC den Zugriff auf Ihr Mobilgerät unter Windows 11
Feb 19, 2024 am 11:45 AM
Microsoft hat in der neuesten Windows 11-Version den Namen von PhoneLink in MobileDevice geändert. Diese Änderung ermöglicht es Benutzern, den Computerzugriff auf mobile Geräte über Eingabeaufforderungen zu steuern. In diesem Artikel wird erläutert, wie Sie Einstellungen auf Ihrem Computer verwalten, die den Zugriff von Mobilgeräten aus zulassen oder verweigern. Mit dieser Funktion können Sie Ihr Mobilgerät konfigurieren und es mit Ihrem Computer verbinden, um Textnachrichten zu senden und zu empfangen, mobile Anwendungen zu steuern, Kontakte anzuzeigen, Telefonanrufe zu tätigen, Galerien anzuzeigen und vieles mehr. Ist es eine gute Idee, Ihr Telefon an Ihren PC anzuschließen? Die Verbindung Ihres Telefons mit Ihrem Windows-PC ist eine komfortable Möglichkeit und erleichtert die Übertragung von Funktionen und Medien. Dies ist nützlich für diejenigen, die ihren Computer verwenden müssen, wenn ihr Mobilgerät nicht verfügbar ist
Architektur neu denken: Verwendung von WordPress für die Entwicklung von Webanwendungen
Sep 01, 2023 pm 08:25 PM
In dieser Serie besprechen wir, wie man Webanwendungen mit WordPress erstellt. Obwohl dies keine technische Serie ist, in der wir uns mit Code befassen, behandeln wir Themen wie Frameworks, Grundlagen, Designmuster, Architektur und mehr. Wenn Sie den ersten Artikel der Serie noch nicht gelesen haben, empfehle ich ihn. Für die Zwecke dieses Artikels können wir den vorherigen Artikel jedoch wie folgt zusammenfassen: Kurz gesagt, Software kann auf Frameworks aufgebaut werden, Software kann die Basis erweitern . Vereinfacht gesagt unterscheiden wir zwischen Framework und Foundation – zwei Begriffen, die in Software oft synonym verwendet werden, obwohl sie nicht dasselbe sind. WordPress ist eine Grundlage, weil es eine eigenständige Anwendung ist. Es ist kein Rahmen. Aus diesem Grund, wenn es um WordPress geht
Der neue König der heimischen FPS! „Operation Delta' Battlefield übertrifft Erwartungen
Mar 07, 2024 am 09:37 AM
„Operation Delta“ wird heute (7. März) einen groß angelegten PC-Test mit dem Namen „Codename: ZERO“ starten. Letztes Wochenende veranstaltete dieses Spiel in Shanghai eine Offline-Flashmob-Erlebnisveranstaltung, und 17173 hatte auch das Glück, zur Teilnahme eingeladen zu werden. Dieser Test liegt etwas mehr als vier Monate seit dem letzten Test zurück, was uns neugierig macht, welche neuen Highlights und Überraschungen wird „Operation Delta“ in so kurzer Zeit mit sich bringen? Vor mehr als vier Monaten habe ich „Operation Delta“ in einer Offline-Verkostung und der ersten Beta-Version erlebt. Damals öffnete das Spiel nur den „Dangerous Action“-Modus. Allerdings war die Operation Delta für ihre Zeit bereits beeindruckend. Im Kontext der großen Hersteller, die in den Markt für mobile Spiele strömen, ist ein solcher FPS mit internationalen Standards vergleichbar
Was sind die Vor- und Nachteile von C++ im Vergleich zu anderen Webentwicklungssprachen?
Jun 03, 2024 pm 12:11 PM
Zu den Vorteilen von C++ in der Webentwicklung gehören Geschwindigkeit, Leistung und Low-Level-Zugriff, während zu den Einschränkungen eine steile Lernkurve und Anforderungen an die Speicherverwaltung gehören. Bei der Auswahl einer Webentwicklungssprache sollten Entwickler die Vorteile und Einschränkungen von C++ basierend auf den Anwendungsanforderungen berücksichtigen.
Honor Magic6 RSR Porsche Design kommt offiziell zum Verkauf, 1 TB zum Preis von 9.999 Yuan
Mar 22, 2024 pm 03:03 PM
Kürzlich veranstaltete Honor Mobile eine neue Produkteinführungskonferenz und stellte offiziell das Honor Magic6RSR Porsche Design vor. Am 22. März erfuhr CNMO, dass das Honor Magic 6 RSR Porsche Design offiziell zum Verkauf angeboten wurde, wobei nur eine 24 GB + 1 TB-Version für 9.999 Yuan erhältlich ist. Honor Magic6 RSR übernimmt ein Porsche-Design-Erscheinungsbild, inspiriert von den klassischen Elementen der Porsche-Supersportwagen. Das Design der hinteren Linie ist vom Porsche-Flying-Line-Design inspiriert und das Kameramodul übernimmt das ikonische sechseckige Design, was dem Produkt ein ausgeprägtes dreidimensionales und dynamisches Gefühl verleiht. Darüber hinaus ist das Produkt in zwei Farben erhältlich, Achatgrau und Eisbeerrosa, die von Porsche-Originalmeistern farblich abgestimmt wurden und die einzigartige Designschönheit noch weiter hervorheben. In puncto Bildschirmtechnologie hält Honor Magic6RSR mit
