JavaScript-Ereignisanalyse in Touchscreens_Javascript-Kenntnisse

Die Beispiele in diesem Artikel beschreiben JavaScript-Ereignisse auf Touchscreens. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Touch-Ereignis

ontouchstart
ontouchmove
ontouchend
ontouchcancel Derzeit unterstützen alle mobilen Browser diese vier Touch-Ereignisse, einschließlich IE. Da Touchscreens auch MouseEvent unterstützen, muss deren Reihenfolge beachtet werden: Touchstart → Mouseover → Mousemove → MouseDown → MouseUp → Click1

Beispiele sind wie folgt:

/**
* onTouchEvent
*/
var div = document.getElementById("div");
//touchstart类似mousedown
div.ontouchstart = function(e){
//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，
//从而可以通过touches获取多点触控的每个触控点
//由于我们只有一点触控，所以直接指向[0]
var touch = e.touches[0];
//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY
var x = touch.clientX;
var y = touch.clientY;
};
//touchmove类似mousemove
div.ontouchmove = function(e){
//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时，
//浏览器的缩放、滚动条滚动等
e.preventDefault();
};
//touchend类似mouseup
div.ontouchup = function(e){
//nothing to do
};

2. Gestenereignisse Unter Gesten versteht man die Verwendung von Multi-Touch zur Durchführung von Vorgängen wie Drehen und Strecken, wie z. B. Vergrößerung und Drehung von Bildern und Webseiten. Gestenereignisse werden nur ausgelöst, wenn sich zwei oder mehr Finger gleichzeitig berühren. Bei der Skalierung müssen wir auf die Positionskoordinaten des Elements achten: Normalerweise verwenden wir offsetX, getBoundingClientRect und andere Methoden, um die Positionskoordinaten des Elements zu erhalten. In mobilen Browsern wird die Seite jedoch häufig während der Verwendung skaliert. und die skalierten Elementkoordinaten ändern sich. Die Antwort ist, dass es unterschiedlich ist. Lassen Sie uns dieses Problem anhand eines Szenarios veranschaulichen: Nachdem Seite A geladen wurde, erhält JavaScript die Koordinaten des Elements im Dokument als (100,100), und dann vergrößert der Benutzer die Seite. Zu diesem Zeitpunkt wird JavaScript zur Ausgabe verwendet Wiederum die Koordinaten des Elements, die immer noch (100,100) sind. Der reaktionsfähige Bereich des Elements auf dem Bildschirm wird jedoch aufgrund der Skalierung versetzt. Sie können die Demo des Brick Breaker-Spiels öffnen, warten, bis die Seite vollständig geladen ist, und dann hineinzoomen. Zu diesem Zeitpunkt werden Sie feststellen, dass Sie das auch dann noch steuern können, wenn Ihr Finger außerhalb des Bereichs „Hier berühren“ berührt Ballbrett, da die Fläche versetzt ist. Der Offset bleibt bestehen, es sei denn, die Seite wird aktualisiert oder die Skalierung wird wieder aufgenommen.

/**
* onGestureEvent
*/
var div = document.getElementById("div");
div.ongesturechange = function(e){
//scale代表手势产生的缩放比例，小于1是缩小，大于1是放大，原始为1
var scale = e.scale;
//rotation代表旋转手势的角度，值区间[0,360]，正值顺时针旋转，负值逆时针
var angle = e.rotation;
};

3. Schwerkrafterkennung Die Schwerkrafterkennung ist relativ einfach. Sie müssen nur das Ereignis onorientationchange zum Körperknoten hinzufügen. In diesem Fall wird der Wert, der die aktuelle Ausrichtung des Mobiltelefons darstellt, aus der Eigenschaft window.orientation abgerufen. Die Werteliste von window.orientation lautet wie folgt:

0: Gleiche Richtung wie beim ersten Laden der Seite
-90: Um 90° im Uhrzeigersinn relativ zur ursprünglichen Richtung gedreht
180: um 180° gedreht
90: 90° gegen den Uhrzeigersinn gedreht. Laut meinen Tests unterstützt Android 2.1 noch keine Schwerkrafterkennung. Dies sind die aktuellen Touchscreen-Ereignisse, die noch nicht in den Standard aufgenommen wurden, aber bereits weit verbreitet sind. Ich habe Android 2.1 und habe es nicht in anderen Umgebungen getestet.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.