Heim > Artikel > Web-Frontend > Ausführliche Erläuterung von Touch-Event-Beispielen in der Webentwicklung
Ausführliche Erläuterung von Touch-Event-Beispielen in der Webentwicklung
- 小云云Original
- 2018-01-17 16:57:521259Durchsuche
Dieser Artikel enthält hauptsächlich eine detaillierte Erläuterung von Beispielen für Touch-Ereignisse in der mobilen Webentwicklung. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Vorherige Wörter
Um Entwicklern einige besondere Informationen zu übermitteln, hat Safari für iOS einige neue exklusive Ereignisse 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 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 werden ausgelöst, wenn der Benutzer den Finger in ein Element hinein oder aus diesem heraus bewegt. 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 Mausereignissen wie folgt
鼠标 触摸 mousedown touchstart mousemove touchmove mouseup touchend
[Hinweis] Einige Versionen von Touch-Ereignissen verwenden Ereignishandler auf DOM0-Ebene unter dem Chrome-Simulator Ereignisse hinzufügen ist ungültig
<!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>300ms
300ms Das Problem bezieht sich auf die Ausführung von a Bestimmtes Element Zwischen seiner Funktion und der Ausführung des Berührungsereignisses liegt ein Intervall von 300 Millisekunden. 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 es angezeigt Das Standardverhalten von Linksprüngen wird 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 Click-through-Problem
Dieses Problem tritt auf, weil das Verhalten beim Berühren des Bildschirms überlastet ist. In dem Moment, in dem ein 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 auf den 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 akzeptiere es. Dieses Penetrationsereignis wird später ausgeblendet
4. Das Tap-Ereignis wird sowohl auf der oberen als auch auf der unteren Ebene verwendet, aber das Standardverhalten ist unvermeidlich
5. Das Touchstart-Ereignis im Dokument verhindert das Standardverhalten.
document.addEventListener('touchstart',function(e){
e.preventDefault();
})Fügen Sie als Nächstes das Sprungverhalten des a-Tags hinzu
a.addEventListener('touchstart',function(){
window.location.href = 'https://cnblogs.com';
})Allerdings ist diese Methode Es gibt Nebenwirkungen, z. B. kann die Seite nicht gescrollt werden, der Text kann nicht ausgewählt werden usw. Wenn Sie das Textauswahlverhalten für ein Element wiederherstellen müssen, können Sie „Bubble verhindern“ verwenden, um das Ereignisobjekt
el.addEventListener('touchstart',function(e){
e.stopPropagation();
})wiederherzustellen
[Grundlegende Informationen]
Das Ereignisobjekt jedes Berührungsereignisses stellt allgemeine Attribute in Mausereignissen bereit, einschließlich Ereignistyp, Ereigniszielobjekt, Ereignissprudeln, Ereignisfluss, Standardverhalten, usw.
Am Beispiel von Touchstart lautet der Beispielcode 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>1 Das currentTarget-Attribut gibt den Speicherort der Abhörfunktion zurück dass das Ereignis ausgeführt wird
2. Das Zielattribut gibt den tatsächlichen Zielknoten des Ereignisses zurück
3. Das srcElement-Attribut hat die gleiche Funktion wie das Zielattribut
//当前目标 currentTarget:[object HTMLpElement] //实际目标 target:[object HTMLpElement] //实际目标 srcElement:[object HTMLpElement]
4、eventPhase属性返回一个整数值，表示事件目前所处的事件流阶段。0表示事件没有发生，1表示捕获阶段，2表示目标阶段，3表示冒泡阶段
5、bubbles属性返回一个布尔值，表示当前事件是否会冒泡。该属性为只读属性
6、cancelable属性返回一个布尔值，表示事件是否可以取消。该属性为只读属性
//事件流 eventPhase: 2 //可冒泡 bubbles: true //默认事件可取消 cancelable: true
【touchList】
除了常见的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); });
})();相关推荐：
javascript移动设备Web开发中对touch事件的封装实例_javascript技巧
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Touch-Event-Beispielen in der Webentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!