English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Eine einfache Methode in der mobilen Entwicklung ist es, zunächst auf dem Desktop Prototypen zu erstellen und dann die spezifischen mobilen Teile auf den Geräten zu behandeln, die unterstützt werden sollen. Mehrpunktierte Berührungseingaben sind eine der Funktionen, die schwer auf einem PC getestet werden können, da die meisten PCs keine Berührungseingaben haben.
Tests, die auf mobilen Geräten durchgeführt werden müssen, könnten Ihre Entwicklungszeit verlängern, da jede Änderung, die Sie vornehmen, den Code auf den Server hochladen und dann auf das Gerät laden muss. Und sobald der Code ausgeführt wird, gibt es nicht viel Debugging, da Tablets und Smartphones sehr wenige Werkzeuge für Web-Entwickler haben.
Eine Lösung für dieses Problem ist die Simulation von Auslöseereignissen auf dem Entwicklungsrechner. Für einzelne Berührungseingaben können Berührungseingaben auf der Grundlage von Mausereignissen simuliert werden. Haben Sie ein Berührungseingabegerät, wie z.B. ein modernes App MacBook, so kann auch mehrpunktierte Berührungseingaben simuliert werden.
Einzelne Berührungseingaben
Wenn Sie auf dem Desktop eine einzelne Berührungseingabe simulieren möchten, probieren Sie Phantom Limb aus, das auf der Webseite Berührungseingaben simuliert und eine riesige Hand anbietet, um zu lenken.
Außerdem gibt es das jQuery-Plugin Touchable, das berührungsbasierte und Mausereignisse plattformübergreifend einheitlich handhabt
Mehrpunktierte Berührungseingaben
Um sicherzustellen, dass Ihre多点触摸web-Anwendung auf Ihrem Browser oder auf einem mehrpunktierten Touchpad (z.B. Apple MacBook oder MagicPad) funktioniert, habe ich diesen MagicTouch.js-Füllwerkzeug erstellt, das Berührungseingaben vom Touchpad erfasst und sie in standardkompatible Berührungseingaben umwandelt.
1. Laden Sie das npTuioClient NPAPI-Plugin herunter und installieren Sie es in ~/Library/Internet Plug-Ins/Verzeichnis.
2. Laden Sie diese TongSeng TUIO-Anwendung für Mac MagicPad herunter und starten Sie diesen Server.
3. Laden Sie die JavaScript-Bibliothek MagicTouch.js herunter, um auf Basis der npTuioClient-Rückruffunktion kompatible Berührungseingaben zu simulieren.
4. In diesem Sinne werden das magictouch.js-Skript und der npTuioClient-Plugin in Ihre Anwendung integriert:
< head> ... < script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script> object> /head> < body> ... < object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;"> tuio" style="width: 0px; height: 0px;"> object> /Touch input plugin failed to load! object> /<
body> 10Ich habe nur in Chrome
Ich habe diesen Ansatz auf dem Test getestet, aber mit kleinen Anpassungen sollte er auf anderen modernen Browsern funktionieren.
Wenn Ihr Computer keine Mehrpunktberührungseingaben hat, können Sie andere TUIO-Tracker wie reacTIVision verwenden, um Touch-Ereignisse zu simulieren. Für weitere Informationen besuchen Sie bitte die Projektseite von TUIO.
Ein zu beachtendes Punkt ist, dass Ihre Gesten mit den Mehrpunktberührungsgesten auf der Betriebssystemebene übereinstimmen können. Auf OS X können Sie die Systemweiten Ereignisse konfigurieren, indem Sie in die Einstellungen für die Trackpad-Präferenzen im Systemeinstellungen gehen.
Mit zunehmender Unterstützung der Mehrpunktberührungsfunktion durch verschiedene mobile Browser freue ich mich sehr, dass neue Web-Anwendungen diese reiche API voll ausnutzen.5Ursprüngliche Quelle: html
rocks.com-Ursprünglicher Titel: Developing for Multi
Touch Web Browsers
Erstens, Touch-Ereignisse auf dem Telefon
touchstart //Grundlegende Ereignisse:
Wird ausgelöst, wenn der Finger den Bildschirm berührt //touchmove
touchend //Wird ausgelöst, wenn der Finger auf dem Bildschirm bewegt wird
Wird ausgelöst, wenn der Finger vom Bildschirm genommen wird //touchcancel
Wird ausgelöst, wenn der Berührungsvorgang durch das System abgebrochen wird
Jedes Ereignis hat die folgenden Listen, z.B. targetTouches bei touchend sind natürlich 0: //touches
Liste der alle Berührungspunkte betreffenden Elemente auf dem Bildschirm //targetTouches
Liste der alle Berührungspunkte betreffenden Elemente //changedTouches
Liste der alle Berührungspunkte betreffenden Ereignisse
Die Koordinaten, die oft pageX, pageY heißen:
pageX //X-Koordinate relativ zur Seite
pageY //Y-Koordinate relativ zur Seite
clientX //X-Koordinate relativ zum Ansichtsraum
clientY //Y-Koordinate relativ zum Ansichtsraum
screenX //X-Koordinate relativ zum Bildschirm
screenY //Y-Koordinate relativ zum Bildschirm
identifier // Die einzigartige Nummer des aktuellen Berührungspunkts
target //Das DOM-Element, das berührt wird
Andere relevante Ereignisse:
event.preventDefault() //Verhindern Sie das Zoomen und Scrollen des Browsers bei Berührung
var supportTouch = "createTouch" in document //Prüfen Sie, ob Touch-Ereignisse unterstützt werden
Zwei, Beispiel
Hier ist der spezifische Code zur Erkennung verschiedener Art von Gleiten, der auf den Ideen anderer basiert und gut verpackt ist, kann studiert und gelernt werden:
var touchFunc = function(obj,type,func) {
//Der Bewegungsbereich liegt in5x5Innerlich wird auf Klick behandelt, s ist Start, e ist Ende
var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
var sTime = 0, eTime = 0;
type = type.toLowerCase();
obj.addEventListener("touchstart",function(){
sTime = new Date().getTime();
init.sx = event.targetTouches[0].pageX;
init.sy = event.targetTouches[0].pageY;
init.ex = init.sx;
init.ey = init.sy;
if(type.indexOf("start") != -1) func();
}, false);
obj.addEventListener("touchmove",function() {
event.preventDefault();//Verhindern Sie das Zoomen und Scrollen des Browsers bei Berührung
init.ex = event.targetTouches[0].pageX;
init.ey = event.targetTouches[0].pageY;
if(type.indexOf("move") !=-1) func();
}, false);
obj.addEventListener("touchend",function() {
var changeX = init.sx - init.ex;
var changeY = init.sy - init.ey;
if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
//Linke und rechte Ereignisse
if(changeX > 0) {
if(type.indexOf("left") !=-1) func();
}else{}}
if(type.indexOf("right") !=-1) func();
}
}
else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
//Obere und untere Ereignisse
if(changeY > 0) {
if(type.indexOf("top") !=-1) func();
}else{}}
if(type.indexOf("down") !=-1) func();
}
}
else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
eTime = new Date().getTime();
//点击事件，此处根据时间差细分下
if((eTime - sTime) > 300) {
if(type.indexOf("long") !=-1) func(); //长按
}
else {
if(type.indexOf("click") !=-1) func(); //当点击处理
}
}
if(type.indexOf("end") !=-1) func();
}, false);
};
转载的文章：手机触摸屏的JS事件
处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：
1.touchstart: // 手指放到屏幕上的时候触发
2.touchmove: // 手指在屏幕上移动的时候触发
3.touchend: // 手指从屏幕上拿起的时候触发
4touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详
属性
1.client / clientY：// 触摸点相对于浏览器窗口viewport的位置
2.pageX / pageY：// 触摸点相对于页面的位置
3.screenX /screenY：// 触摸点相对于屏幕的位置
4.identifier： // touch对象的unique ID
//touchstart事件
function touchSatrtFunc(e) {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = e.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
}
//touchmove事件
function touchMoveFunc(e) {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
var text = 'TouchMove事件触发：（' + x + ', ' + y + ）';
//判断滑动方向
if (x - startX != 0) {
//左右滑动
}
if (y - startY != 0) {
//上下滑动
}
}
转载的第二篇文章：Mobile Web前端开发系列: 事件处理（二）
上篇文章我们讲了html的基本事件，这篇文章我们着重讲解下触摸事件，触摸事件触发的条件是手指接触屏幕、手指在屏幕上移动或者从屏幕上离开。事件是触摸的集合，它起始于手指初次放置在屏幕上，终止于最后一个手指离开屏幕。事件从开始到结束过程中的所有触摸操作都存储在相同事件的记录中。
touch事件
touch事件可以分为单点触摸和多点触摸两种，单点触摸高端机一般都支持，Safari2.0、Android3.0以上的版本支持多点触摸，支持最多5个手指同时触摸屏幕，ipad最多支持11个手指同时触摸屏幕，我们可以采用以下的事件模型捕获这些事件：
ontouchstart ontouchmove ontouchend ontouchcancel
当用户按下手指在屏幕上，ontouchstart会被触发，当用户移动一个或多个手指的时候，ontouchmove会被触发，当用户移走手指， ontouchend被触发。那什么时候触发ontouchcancel呢？当一些更高级别的事件发生的时候，例如，alert，有电话打来或者有 推送的消息提示的时候会取消当前的touch操作，即触发ontouchcancel。当你在开发一个web game的时候，ontouchcancel 对你很重要，你可以在ontouchcancel触发的时候暂停游戏或者保存游戏。
gesture事件
gesture事件的运行原理与touch事件相同，只是gesture事件仅当屏幕上存在至少两个手指时触发，所以Safari2.0、Android3.0以上版本支持，手势具备诸多优势，可以帮助我们测量两指放缩和旋转操作，事件模型如下：
ongesturestart ongesturechange ongestureend
事件属性
无论使用触摸还是手势事件，你都需要将这些事件转换为单独的触摸来使用它们。为此，你需要访问事件对象的一系列的属性。
targetTouches 目标元素的所有当前触摸 changedTouches 页面上最新更改的所有触摸 touches 页面上的所有触摸
changedTouches, targetTouches, and touches contain slightly different touch lists. targetTouches and touches each contain the list of fingers currently on the screen, but changedTouches only lists the last touch. If you are using touchend or gestureend events, this property is very important. In both cases, there will be no fingers on the screen anymore, so targetTouches and touches should be empty, but you can still understand what happened last by looking at the changedTouches array.
Since touch properties will generate arrays, you can use JavaScript array functions to access them. This means that event.touches[0] will return the first touch, and you can use event.touches.length to calculate the number of touches currently stored.
When viewing a single touch, you can also access other touches by using event.targetTouches[0], each touch will contain some specific information,
clientX, clientY relative to the X or Y position of the current screen, pageX, pageY relative to the X or Y position of the entire page, screenX, screenY relative to the X or Y position of the user's computer screen, identifier - the unique identifier of the event, target - the target object generated by the touch
The event object of gesture events will have two additional properties compared to ordinary touch events: rotation - the rotation angle of the finger, scale - the zoom value
Reprinted article:JavaScript touch and gesture events
To convey some special information to developers, iOS Safari has added some proprietary events. Since iOS devices do not have a mouse or keyboard, conventional mouse and keyboard events are not enough when developing interactive web pages for mobile Safari. With the addition of WebKit in Android, many of these proprietary events have become de facto standards.
1. Touch events
Contains iOS2.0 software iPhone 3When G is released, it also includes a new version of the Safari browser. This new mobile Safari provides some new events related to touch (touch) operations. Later, browsers on Android also implemented the same events. Touch events are triggered when the user's finger is on the screen, sliding on the screen, or moving away from the screen. Specifically, there are the following touch events.
touchstart: When a finger touches the screen, it is triggered; it will also be triggered even if there is already a finger on the screen.
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。
上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。
除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含下列属性。
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标。
使用这些属性可以跟踪用户对屏幕触摸操作。来看下面的例子。
function handleTouchEvent(event) {
//只跟踪一次触摸
if (event.touches.length == 1) {
var output = document.getElementById("output");
switch (event.type) {
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX + ", + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + ", + event.changeTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //Scrollen verhindern
output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + ", + event.changedTouches[0].clientY + ")";
break;
}
}
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);
Der obige Code verfolgt eine einmalige Berührung auf dem Bildschirm. Aus Gründen der Einfachheit wird nur dann eine Information ausgegeben, wenn einmal eine aktive Berührung vorhanden ist. Wenn das touchstart-Event ausgelöst wird, wird die Berührungsortinformation in
Wenn das touchmove-Event ausgelöst wird, wird das Standardverhalten aufgehoben, das Scrollen verhindert (das Standardverhalten des Berührens ist das Scrollen der Seite), und dann werden die Änderungen der Berührungsinformationen ausgegeben. Das touched-Event gibt jedoch die endgültigen Informationen über die Berührung aus. Beachten Sie, dass im Moment des Auslösens des touched-Events keine Touch-Objekte im touched-Set vorhanden sind, da keine aktive Berührung vorhanden ist; in diesem Fall muss auf das changeTouchs-Set umgeschaltet werden.
Diese Events werden auf allen Elementen des Dokuments ausgelöst und können daher verschiedene Teile der Seite getrennt operieren. Bei Berührung eines Elements auf dem Bildschirm verlaufen die Events in folgender Reihenfolge:
touchstart
mouseover
mousemove
mousedown
mouseup
click
touchend
Browser, die Berührungsevents unterstützen, sind die iOS-Version von Safari, die Android-Version von WebKit, die Beta-Version von Dolfin und OS6+daher BlackBerry WebKit und Opera Mobile 10.1und dem proprietären OS von LG mit dem Phantom-Browser. Derzeit unterstützt nur die iOS-Version von Safari die Mehrpunktberührung. 6+und Chrome unterstützen auch Berührungsevents.
2.Gestenevents
IOS 2In Safari 0 wurde eine Reihe von Gestenevents eingeführt. Wenn zwei Finger den Bildschirm berühren, wird ein Gesten erzeugt, das in der Regel die Größe des angezeigten Elements ändert oder es dreht. Es gibt drei Gestenevents, die wie folgt sind.
gesturestart:当一个手指已经按在屏幕上而另一个手指触摸屏幕时触发。
gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
gestureend:当任何一个手指从屏幕上移开时触发。
只有当两个手指都触摸到事件的接收容器时才会触发这些事件。在一个元素上设置事件处理程序，意味着两个手指必须同时位于该元素的范围之内，才能触发手势事件（这个元素就是目标）。由于这些事件会冒泡，所以将事件处理程序放在文档上也可以处理所有手势事件。此时，事件的目标就是两个手指都位于其范围内的那个元素。
触摸事件和手势事件之间存在某种联系。当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指也放在屏幕上，则会先触发gesturestart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件，随后触发基于该手指的touchstart事件。如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件，但只要有一个手指移开，就会触发gestureend事件，紧接着又会触发基于该手指的touchend事件。
与触摸事件一样，每个手势事件的event对象都包含标准的鼠标事件属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。此外，还包含两个额外的属性：rotation和scale。其中，rotation属性表示手指引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转（该值从0开始）。而scale属性表示两个手指间距的变化情况（例如向内收缩会缩短距离）；这个值从1开始时，并随着距离的增加而增长，随着距离的减小而减小。
以下是一个使用手势事件的示例：
function handleGestureEvent(event) {
var output = document.getElementById("output");
switch(event.type) {
case "gesturestart":
output.innerHTML = "Gesture started (rotation=" + event.ratation +",scale=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML += "<br>Gesture ended (rotation+" + event.rotation + ",scale=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML += "<br>Gesture changed (rotation+=" + event.rotation + ",scale"+" + event.scale + ")";
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);
Wie im Beispiel der vorherigen Berührungsevent-Demonstration, verknüpft der Code hier jeden Event nur mit einer Funktion und gibt dann die相关信息 über diese Funktion aus.
Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und wir bitten Sie, die Anstrengungen von呐喊教程 zu unterstützen.
Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrecht des jeweiligen Autors. Der Inhalt wurde von Internetnutzern freiwillig bereitgestellt und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte mit Urheberrechtsverletzungen finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @, wenn Sie eine E-Mail senden, um zu melden, und fügen Sie relevante Beweise bei. Bei nachgewiesener Täuschung wird diese Website den涉嫌侵权的内 容立即删除。)