Heim >Web-Frontend >H5-Tutorial >HTML5-Touch-Event-Entwicklung Tap-Event-Einführung_HTML5-Tutorial-Fähigkeiten
HTML5-Touch-Event-Entwicklung Tap-Event-Einführung_HTML5-Tutorial-Fähigkeiten
- WBOYOriginal
- 2016-05-16 15:45:252114Durchsuche
Touch-Ereignisse sind HTML5-Ereignisse, die nur für mobile Browser gelten. Obwohl Klickereignisse häufiger auf PCs und mobilen Endgeräten auftreten, kommt es auf dem mobilen Endgerät zu einer Verzögerung von 300 ms, die sich auf die Beurteilung von Doppelklicks auswirkt und langes Drücken, da nur das Klickereignis erst nach Ablauf der Standardwartezeit ausgelöst wird, um sicherzustellen, dass keine nachfolgenden Aktionen ausgeführt werden. Dadurch ist die Reaktion auf Berührungsereignisse schneller und das Erlebnis besser.
Art des Berührungsereignisses:
Um berührungsbedingte Zustandsänderungen zu unterscheiden, gibt es mehrere Arten von Berührungsereignissen. Sie können feststellen, um welchen Typ es sich bei dem aktuellen Ereignis handelt, indem Sie das Attribut <font face="NSimsun">TouchEvent.type</font> des Berührungsereignisses untersuchen.
Hinweis: In vielen Fällen werden Berührungsereignisse und Mausereignisse gleichzeitig ausgelöst (der Zweck besteht darin, zu ermöglichen, dass Code, der nicht für Touch-Geräte optimiert ist, bei Berührung weiterhin normal funktioniert). Geräte). Wenn Sie Berührungsereignisse verwenden, können Sie <font face="NSimsun">event.preventDefault()</font> aufrufen, um zu verhindern, dass Mausereignisse ausgelöst werden.
Standard-Touch-Ereignisse
| Ereignisname | Beschreibung | Enthält das Touches-Array | |||||||||||||||||||||
touchstart |
Wird ausgelöst, wenn der Benutzer einen Berührungspunkt auf der Berührungsoberfläche platziert. Das Ziel des Ereignisses <font face="NSimsun">element</font> wird das Ziel <font face="NSimsun">element</font> sein der Touch-Standortcode |
Ja | |||||||||||||||||||||
touchmove |
<font face="NSimsun">element</font> entspricht diesem <font face="NSimsun"> touchmove </font> Ereignis Das Ziel des <font face="NSimsun">Touchstart-Ereignisses</font> ist dasselbe wie das <font face="NSimsun">Element</font> Code> ,
Selbst wenn das Ereignis
|
Ja | |||||||||||||||||||||
touchend |
Wird ausgelöst, wenn ein Berührungspunkt vom Benutzer von der Berührungsoberfläche entfernt wird (wenn der Benutzer einen Finger von der Berührungsoberfläche hebt).
Wird auch ausgelöst, wenn sich der Kontakt außerhalb der Grenzen der Berührungsebene bewegt. Beispielsweise zieht der Benutzer seinen Finger über den Rand des Bildschirms.
Berührungen, die aus der Berührungsebene entfernt wurden, finden Sie im Attribut changedTouches, das in der TouchList definiert ist.
|
Ja | |||||||||||||||||||||
touchenter |
Wird ausgelöst, wenn ein Kontakt ein <font face="NSimsun">Element</font> betritt. Diese Veranstaltung hat keinen Sprudelprozess. |
Ja | |||||||||||||||||||||
touchleave |
Wird ausgelöst, wenn ein Kontakt ein <font face="NSimsun">Element</font> verlässt. Diese Veranstaltung hat keinen Sprudelprozess. |
Ja | |||||||||||||||||||||
touchcancel |
Wird ausgelöst, wenn ein Kontakt aus irgendeinem Grund unterbrochen wird. Es gibt mehrere mögliche Gründe:
|
Ja |
Objekteigenschaften berühren
<font face="NSimsun">Touch.identifier</font> |
Gibt einen Wert zurück, der den Kontaktpunkt mit der Berührungsebene eindeutig identifiziert. Dieser Wert bleibt über alle von diesem Finger (oder Stift usw.) ausgelösten Ereignisse hinweg konsistent, bis er die Berührungsebene verlässt. | ||||||||||||||||||||||
<font face="NSimsun">Touch.screenX</font> |
Die X-Koordinate des Berührungspunkts relativ zum linken Rand des Bildschirms. Schreibgeschützte Eigenschaft. | ||||||||||||||||||||||
<font face="NSimsun">Touch.screenY</font> |
Die Y-Koordinate des Berührungspunkts relativ zum oberen Rand des Bildschirms. Schreibgeschützte Eigenschaft. | ||||||||||||||||||||||
<font face="NSimsun">Touch.clientX</font> |
Die X-Koordinate des Berührungspunkts relativ zum linken Rand des sichtbaren Ansichtsfensters. Enthält keine Schreibgeschützte Eigenschaft. | ||||||||||||||||||||||
<font face="NSimsun">Touch.clientY</font> |
Die Y-Koordinate des Berührungspunkts relativ zum oberen Rand des sichtbaren Ansichtsfensters. Enthält keine Schreibgeschützte Eigenschaft. | ||||||||||||||||||||||
<font face="NSimsun">Touch.pageX</font> |
Die X-Koordinate des Berührungspunkts relativ zum linken Rand des HTML-Dokuments. Bei horizontalemScrollenoffset, Dieser Wert enthält den horizontalen Scroll-Offset Schreibgeschützte Eigenschaft.
|
||||||||||||||||||||||
<font face="NSimsun">Touch.pageY</font> |
Die Y-Koordinate des Berührungspunkts relativ zum oberen Rand des HTML-Dokuments. <font face="NSimsun">Wenn ein horizontaler Scroll-Offset vorhanden ist, umfasst dieser Wert den vertikalen Scroll-Offset</font> . Schreibgeschütztes Attribut.
|
||||||||||||||||||||||
<font face="NSimsun">Touch.radiusX</font> |
Der Radius der horizontalen Achse (X-Achse) der kleinsten Ellipse, die die Kontaktfläche zwischen dem Benutzer und der Touch-Oberfläche umschließen kann. Die Einheit dieses Werts ist dieselbe wie <font face="NSimsun"> screenX. </font>Schreibgeschütztes Attribut.
|
||||||||||||||||||||||
<code><font face="NSimsun">Touch.force</font> |
Der Druck, den der Finger auf die Touch-Oberfläche ausübt, eine Gleitkommazahl von 0,0 (kein Druck) bis 1,0 (maximaler Druck). Schreibgeschützte Eigenschaft. | ||||||||||||||||||||||
<code><font face="NSimsun">Touch.radiusY</font> |
Der Radius der vertikalen Achse (Y-Achse) der kleinsten Ellipse, die die Kontaktfläche zwischen dem Benutzer und der Touch-Oberfläche umschließen kann. Die Einheit dieses Werts ist dieselbe wie <font face="NSimsun"> screenY. </font>Schreibgeschütztes Attribut.
|
||||||||||||||||||||||
<code><code><font face="NSimsun">Touch.target</font> |
<font face="NSimsun">touchstart</font>), befindet sich der Berührungspunkt im HTML-Element, auch wenn die Berührung erfolgt Punkt bewegt sich Während des Vorgangs hat die Position des Berührungspunkts den effektiven Interaktionsbereich dieses Elements verlassen, Oder dieses Element wurde aus dem Dokument entfernt. Es ist zu beachten, dass dieses Ereignis weiterhin darauf verweist, wenn dieses Element während des Touch-Vorgangs entfernt wird, dieses Ereignis jedoch nicht mehr zur Schriftart aufsteigt face="NSimsun">Fenster oder <font face="NSimsun">Dokument</font> Objekt.Wenn also ein Element während des Touch-Vorgangs entfernt werden kann, besteht die beste Vorgehensweise darin, den Touch-Ereignis-Listener an das Element selbst zu binden, um zu verhindern, dass das Element aus seinem übergeordneten Element entfernt wird. Es wurde ein Sprudelndes Ereignis erkannt aus diesem Element. Schreibgeschütztes Attribut.
|
| 事件名称 | 描述（在触摸设备上） |
|---|---|
| MSPointerDown | 触摸开始 |
| MSPointerMove | 接触点移动 |
| MSPointerUp | 触摸结束 |
| MSPointerOver | 触摸点移动到元素内，相当于mouseover |
| MSPointerOut | 触摸点离开元素，相当于mouseout |
MSPointerEvent-Eigenschaft
| 属性 | 描述 |
|---|---|
| hwTimestamp | 创建事件的时间（ms） |
| isPrimary | 标识该指针是不是主指针 |
| pointerId | 指针的唯一ID（类似于触摸事件的标识符） |
| pointerType | 一个整数，标识了该事件来自鼠标、手写笔还是手指 |
| pressure | 笔的压力，0-255，只有手写笔输入时才可用 |
| rotation | 0-359的整数，光标的旋转度（如果支持的话） |
| tiltX/tiltY | 手写笔的倾斜度，只有用手写笔输入时才支持 |
Äquivalente Veranstaltungen
| 鼠标 | 触摸 | 键盘 |
| mousedown | touchstart | keydown |
| mousemove | touchmove | keydown |
| mouseup | touchend | keyup |
| mouseover | focus |
Offensichtlich sind die Touch-Aktionssequenz: Touchstart-Touchmove-Touchend und die Maussequenz: Mousedown-Mousemove-Mouseup und die Tastatursequenz: Keydown-Keypress-Keyup sehr ähnlich, da alle drei Interaktionsmuster sehr ähnlich sind kann für Start-Bewegung-Stopp beschrieben werden.
Allerdings muss der Klick den Touchstart-Touchmove-Touchend-Prozess mit einer Verzögerung von 300 ms durchlaufen, sodass ein Tap-Ereignis erforderlich ist, um den gleichen Punkt für kurze Zeit zu berühren.
Gekapselte Tap- und Longtap-Ereignisse
- (function() {
- var TOUCHSTART, TOUCHEND;
- if (typeof(window.ontouchstart) != 'undefiniert') {
- TOUCHSTART = 'touchstart';
- TOUCHEND = 'touchend';
- TOUCHMOVE='touchmove';
- } else if (typeof(window.onmspointerdown) != 'undefiniert') {
- TOUCHSTART = 'MSPointerDown';
- TOUCHEND = 'MSPointerUp';
- TOUCHMOVE='MSPointerMove';
- } else {
- TOUCHSTART = 'mousedown';
- TOUCHEND = 'mouseup';
- TOUCHMOVE = 'mousemove';
- }
- Funktion NodeTouch(node) {
- this._node = node;
- }
- function tap(node,callback,scope) {
- node.addEventListener(TOUCHSTART, function(e) {
- x = e.touches[0].pageX;
- y = e.touches[0].pageY;
- });
- node.addEventListener(TOUCHEND, function(e) {
- e.stopPropagation();
- e.preventDefault();
- var curx = e.changedTouches[0].pageX;
- var cury = e.changedTouches[0].pageY;
- if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
- callback.apply(scope, arguments);
- }
- });
- }
- function longTap(node,callback,scope) {
- var x,y,startTime=0,endTime=0,in_dis=false;
- node.addEventListener(TOUCHSTART, function(e) {
- x = e.touches[0].pageX;
- y = e.touches[0].pageY;
- startTime=(new Date()).getTime();
- });
- node.addEventListener(TOUCHEND, function(e) {
- e.stopPropagation();
- e.preventDefault();
- var curx = e.changedTouches[0].pageX;
- var cury = e.changedTouches[0].pageY;
- if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
- in_dis=true;
- }else{
- in_dis=false;
- }
- endTime=(new Date()).getTime();
- if (endTime - startTime > 300 && in_dis) {
- callback.apply(scope, arguments);
- }
- });
- }
- NodeTouch.prototype.on = Funktion(evt, callback, scope) {
- var scopeObj;
- var x,y;
- if (!scope) {
- scopeObj = this._node;
- } else {
- scopescopeObj = scope;
- }
- if (evt === 'tap') {
- tap(this._node,callback,scope);
- } else if(evt === 'longtap'){
- longTap(this._node,callback,scope);
- } else {
- this._node.addEventListener(evt, function() {
- callback.apply(scope, arguments);
- });
- }
- dies zurückgeben;
- }
- window.$ = function(selector) {
- var node = document.querySelector(selector);
- if (node) {
- return new NodeTouch(node);
- } else {
- return null;
- }
- }
- })();
- var box=$("#box");
- box.on("longtap",function(){
- console.log("你已经长按了");
- },Box)
以上这篇HTML5触摸事件演化tap事件介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家.
原文地址：http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen