English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In sviluppo mobile, un metodo abbastanza semplice è iniziare con la progettazione di prototipi sul desktop e poi affrontare le parti specifiche del mobile sui dispositivi che si intende supportare. Il multitouch è una delle funzionalità più difficili da testare su un PC, poiché la maggior parte dei PC non ha input touch.
I test che devono essere eseguiti sui dispositivi mobili potrebbero allungare il tuo ciclo di sviluppo, perché ogni modifica che fai deve essere inviata al server, caricata sul dispositivo e poi eseguita. Una volta eseguita, non ci sono molte possibilità di debug dell'applicazione, poiché tablet e smartphone sono molto carenti degli strumenti utilizzati dai sviluppatori web.
Una soluzione a questo problema potrebbe essere quella di simulare gli eventi di trigger sul computer di sviluppo. Per i tocchi singoli, gli eventi di tocco possono essere simulati basandosi sugli eventi del mouse. Se hai un dispositivo di input touch, come un MacBook moderno, anche i tocchi multitouch possono essere simulati.
Eventi di tocco singolo
Se vuoi simulare eventi di tocco singoli sul desktop, prova Phantom Limb, il programma che simula gli eventi di tocco sul web e fornisce una grande mano per guidare.
Esiste anche l'estensione jQuery Touchable, che unifica gli eventi di tocco e mouse in modo cross-platform
Eventi multitouch
Per rendere il tuo applicativo multitouch web funzionante nel tuo browser o su una superficie multitouch (ad esempio Apple MacBook o MagicPad), ho creato questo strumento di riempimento MagicTouch.js che cattura gli eventi di tocco dalla superficie e li trasforma in eventi di tocco compatibili con lo standard.
1. Scarica l'estensione NPAPI di npTuioClient e installala nella directory ~/Library/Internet Plug-Ins/.
2. Scarica l'app TongSeng TUIO di MagicPad per Mac e avvia questo server.
3.Scarica la libreria JavaScript MagicTouch.js per simulare eventi di tocco compatibili con la specifica di callback basata su npTuioClient.
4. Inclusi il file JavaScript magictouch.js e l'estensione npTuioClient nel tuo applicativo nel modo seguente:
< head> ... < script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script> < /head> < body> ... < object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;"> Il plugin di input Touch non è stato in grado di caricarsi! < /object> < /body>
Ho testato questo metodo solo su Chrome 10, ma con alcune modifiche dovrebbe funzionare anche su altri browser moderni.
Se il tuo computer non ha un input multi-touch, puoi utilizzare altri tracker TUIO come reacTIVision per simulare eventi di tocco. Per ulteriori informazioni, consulta la pagina del progetto TUIO.
Un punto da notare è che i tuoi gesti possono essere gli stessi dei gesti multi-touch a livello di OS. Su OS X, puoi configurare gli eventi di sistema livello globale accedendo alle preferenze di Trackpad nella pagina delle preferenze di sistema.
Con l'aumento del supporto alla funzione multi-touch da parte dei browser mobili, sono molto felice di vedere che le nuove applicazioni web sfruttano appieno questa ricca API.
Fonte originale: html5rocks.com
Titolo originale: Developing for Multi-Touch Web Browsers
1. Eventi di tocco sui dispositivi mobili
Eventi di base:
touchstart // Attivato quando il dito entra in contatto con lo schermo
touchmove // Attivato quando il dito si muove sullo schermo
touchend // Attivato quando il dito viene rimosso dallo schermo
Questo è meno utilizzato: touchcancel // Attivato quando il processo di tocco viene annullato dal sistema
Ogni evento ha le seguenti liste, ad esempio per il touchend i targetTouches sono ovviamente 0:
touches // Elenco di dita presenti sullo schermo
targetTouches // Elenco di dita presenti sull'elemento
changedTouches // Elenco di dita coinvolte nell'evento corrente
Ogni evento ha una lista, ogni lista ha anche le seguenti proprietà:
Tra cui le coordinate più comuni sono pageX, pageY:
pageX // coordinate X rispetto alla pagina
pageY // coordinate Y rispetto alla pagina
clientX // coordinate X rispetto alla vista
clientY // coordinate Y rispetto alla vista
screenX // coordinate X rispetto allo schermo
screenY // coordinate Y rispetto allo schermo
identifier // numero univoco del punto di tocco corrente
target // elemento DOM toccato con il dito
Altri eventi correlati:
event.preventDefault(); // blocca lo zoom e la scorrimento della barra di rollover durante il tocco
var supportTouch = "createTouch" in document // verifica se supporta gli eventi di tocco
Secondo esempio
Di seguito è riportato il codice specifico per ottenere diversi tipi di scorrimento, combinando l'idea degli altri, avvolto e può essere utilizzato come esempio di studio:
var touchFunc = function(obj,type,func) {
// La gamma di scorrimento è all'interno di 5x5, quindi si esegue il trattamento di cliccamento, s è l'inizio, e è la fine
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;
se (type.indexOf("start") != -1) func();
}, false);
obj.addEventListener("touchmove",function() {
event.preventDefault(); // blocca lo zoom e la scorrimento della barra di rollover durante il tocco
init.ex = event.targetTouches[0].pageX;
init.ey = event.targetTouches[0].pageY;
se (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) {
// Eventi di sinistra e destra
if(changeX > 0) {
if(type.indexOf("left")!=-1) func();
}
if(type.indexOf("right")!=-1) func();
}
}
else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
// Eventi di su e giù
if(changeY > 0) {
if(type.indexOf("top")!=-1) func();
}
if(type.indexOf("down")!=-1) func();
}
}
else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
eTime = new Date().getTime();
// Evento di click, qui si suddivide in base alla differenza di tempo
if((eTime - sTime) > 300) {
if(type.indexOf("long")!=-1) func(); // Tocco prolungato
}
else {
if(type.indexOf("click")!=-1) func(); // Gestione del click
}
}
if(type.indexOf("end")!=-1) func();
}, false);
};
Articolo riportato:Eventi JS della schermata di tocco del telefono
Gestire gli eventi Touch ti permette di tracciare la posizione di ogni dito dell'utente. Puoi associare i seguenti quattro eventi Touch:
1.touchstart: // Quando il dito viene messo sullo schermo.
2.touchmove: // Quando il dito si muove sullo schermo.
3.touchend: // Quando il dito viene sollevato dallo schermo.
4touchcancel: // Quando il sistema annulla l'evento touch. Non è noto quando il sistema annullerà.
Proprietà
1.client / clientY: // Posizione del punto di tocco rispetto alla viewport del browser
2.pageX / pageY: // Posizione del punto di tocco rispetto alla pagina
3.screenX /screenY: // Posizione del punto di tocco rispetto allo schermo
4.identifier: // ID unico dell'oggetto touch
//Evento touchstart
function touchSatrtFunc(e) {
//evt.preventDefault(); //Blocca la zoomatura, lo scorrimento della barra di scorrimento del browser durante il tocco
var touch = e.touches[0]; //Ottieni il primo punto di tocco
var x = Number(touch.pageX); //Coordinata X del punto di tocco della pagina
var y = Number(touch.pageY); //Coordinata Y del punto di tocco della pagina
//Registra la posizione iniziale del punto di tocco
startX = x;
startY = y;
}
//Evento touchmove
function touchMoveFunc(e) {
//evt.preventDefault(); //Blocca la zoomatura, lo scorrimento della barra di scorrimento del browser durante il tocco
var touch = evt.touches[0]; //Ottieni il primo punto di tocco
var x = Number(touch.pageX); //Coordinata X del punto di tocco della pagina
var y = Number(touch.pageY); //Coordinata Y del punto di tocco della pagina
var text = 'Evento TouchMove attivato: (' + x + ', ' + y + ')';
//Determinazione della direzione di scorrimento
if (x - startX != 0) {
//Scorrimento orizzontale
}
if (y - startY != 0) {
//Scorrimento verticale
}
}
Secondo articolo riportato:Serie di sviluppo frontend Mobile Web: Gestione degli eventi (due)
Nell'articolo precedente abbiamo parlato degli eventi base di HTML, in questo articolo ci concentriamo sugli eventi di tocco, i quali vengono scatenati quando un dito tocca lo schermo, si muove sullo schermo o si allontana dallo schermo. Gli eventi sono una raccolta di toccamenti, che iniziano quando il dito viene per la prima volta posizionato sullo schermo e terminano quando l'ultimo dito si allontana dallo schermo. Tutte le operazioni di tocco durante il processo da inizio a fine dell'evento vengono memorizzate nella stessa registrazione dell'evento.
Eventi touch
Gli eventi touch possono essere suddivisi in singoli toccamenti e toccamenti multipli, i toccamenti singoli sono supportati generalmente sui dispositivi ad alta definizione, Safari 2.0 e versioni superiori di Android supportano i toccamenti multipli, che possono gestire fino a 5 dita contemporaneamente toccare lo schermo, mentre l'iPad supporta fino a 11 dita contemporaneamente. Possiamo utilizzare il seguente modello di eventi per catturare questi eventi:
ontouchstart ontouchmove ontouchend ontouchcancel
Quando l'utente preme un dito sullo schermo, viene attivato ontouchstart, quando l'utente muove una o più dita, viene attivato ontouchmove, quando l'utente toglie le dita, viene attivato ontouchend. Quando viene attivato ontouchcancel? Quando si verificano eventi di livello superiore, come alert, chiamate in arrivo o notifiche di messaggi push, viene annullata l'operazione di tocco corrente, quindi viene attivato ontouchcancel. Quando si sviluppa un web game, ontouchcancel è molto importante, è possibile sospendere o salvare il gioco quando viene attivato ontouchcancel.
Eventi gesture
Il funzionamento degli eventi gesture è lo stesso degli eventi touch, ma gli eventi gesture vengono attivati solo quando ci sono almeno due dita sullo schermo, quindi sono supportati da Safari 2.0 e versioni superiori di Android. Gli eventi gesture offrono molti vantaggi, che ci aiutano a misurare le operazioni di zoom e rotazione a due dita, il modello di modello degli eventi è il seguente:
ongesturestart ongesturechange ongestureend
Proprietà dell'evento
Indipendentemente dall'uso di eventi di tocco o gesti, è necessario convertire questi eventi in singoli tocchi per utilizzarli. Per questo, è necessario accedere a una serie di proprietà dell'oggetto evento.
targetTouches: tutti i tocchi attuali dell'elemento di destinazione changedTouches: tutti i tocchi più recenti della pagina touches: tutti i tocchi della pagina
changedTouches, targetTouches e touches contengono liste di tocchi leggermente diverse. targetTouches e touches contengono la lista dei dita attualmente presenti sullo schermo, ma changedTouches elenca solo i tocchi più recenti. Se si utilizza l'evento touchend o gestureend, questa proprietà è molto importante. In entrambi i casi, non ci sono più dita sullo schermo, quindi targetTouches e touches dovrebbero essere vuoti, ma è possibile comprendere l'ultima cosa accaduta esaminando l'array changedTouches.
Poiché le proprietà di tocco generano sempre un array, è possibile utilizzare le funzioni degli array JavaScript per accedervi. Questo significa che event.touches[0] restituirà il primo tocco e può essere utilizzato event.touches.length per calcolare il numero di tocchi attualmente memorizzati.
Quando si esamina un singolo tocco, utilizzando event.targetTouches[0], è possibile accedere anche agli altri tocchi, ciascuno dei quali contiene alcune informazioni specifiche.
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 object that generates the touch target
The event object of gesture events will have two additional properties compared to ordinary touch events: rotation, the rotation angle of the finger, and scale, the scaling 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
When the iPhone 3G, which included iOS 2.0 software, was released, it also included a new version of the Safari browser. This new mobile Safari provided some new events related to touch (touch) operations. Later, the same events were also implemented on browsers on Android. Touch events are triggered when the user's finger is on the screen, sliding on the screen, or removed from the screen. Specifically, there are the following touch events.
touchstart: triggered when the finger touches the screen; it will also trigger even if there is already a finger on the screen.
touchmove: triggered continuously when the finger slides on the screen. During this event, calling preventDefault() can prevent scrolling.
touchend: triggered when the finger is moved off the screen.
touchcancel: triggered when the system stops tracking the touch. The exact triggering event for this event is not clearly stated in the documentation.
These events all bubble and can be canceled. Although these touch events are not defined in the DOM specification, they are implemented in a compatible DOM manner. Therefore, each touch event is not defined in the DOM specification, but they are implemented in a compatible DOM manner. Therefore, the event object of each touch event provides the common properties found in mouse events: bubbles, cancelable, view, clientX, clientY, screenX, screenY, detail, altKey, shiftKey, ctrlKey, and metaKey.
In addition to the common DOM properties, touch events also include the following three properties used to track touches.
touches: represents the array of Touch objects for the current tracked touch operations.
targetTouches: array di oggetti Touch specifici per l'obiettivo dell'evento.
changeTouches: array di oggetti Touch che rappresentano le modifiche avvenute dal tocco precedente.
Ogni oggetto Touch contiene le seguenti proprietà.
clientX: la coordinate X del punto di tocco nel viewport.
clientY: la coordinate Y del punto di tocco nel viewport.
identifier: ID unico che rappresenta il tocco.
pageX: la coordinate x del punto di tocco del target nella pagina.
pageY: la coordinate y del punto di tocco del target nella pagina.
screenX: la coordinate x del punto di tocco del target nello schermo.
screenY: la coordinate y del punto di tocco del target nello schermo.
target: le coordinate del nodo DOM toccato.
Queste proprietà possono essere utilizzate per tracciare le operazioni di tocco degli utenti sullo schermo. Ecco un esempio.
function handleTouchEvent(event) {
//Traccia solo una volta il tocco
if (event.touches.length == 1) {
var output = document.getElementById("output");
switch (event.type) {
case "touchstart":
output.innerHTML = "Inizio del tocco (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML += "<br>Termine del tocco (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //Impedisce lo scorrimento
output.innerHTML += "<br>Movimento del tocco spostato (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
}
}
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);
Il codice sopra traccia un'operazione di tocco che si verifica sullo schermo. Per semplificare, vengono emessi informazioni solo quando c'è un'operazione di tocco attiva. Quando si verifica l'evento touchstart, le informazioni di posizione del tocco vengono emesse a
all'interno dell'elemento. Quando si verifica l'evento touchmove, viene annullata la comportamento predefinito, viene bloccato lo scorrimento (il comportamento predefinito del touchmove è lo scorrimento della pagina), e vengono emessi le informazioni di cambiamento dell'operazione di tocco. L'evento touched emette invece informazioni finali sull'operazione di tocco. Notare che quando si verifica l'evento touched, non ci sono più oggetti Touch nella raccolta touched, perché non esiste alcuna operazione di tocco attiva; in questo caso, è necessario passare alla raccolta changeTouchs.
Questi eventi vengono attivati su tutti gli elementi del documento, quindi è possibile operare su diverse parti della pagina. Quando si tocca un elemento dello schermo, l'ordine in cui questi eventi si verificano è il seguente:
touchstart
mouseover
mousemove
mousedown
mouseup
click
touchend
I browser che supportano gli eventi di tocco includono Safari per iOS, WebKit per Android, beta di Dolfin, WebKit di BlackBerry OS6+, Opera Mobile 10.1 e il browser Phantom su OS proprietario di LG. Al momento, solo Safari per iOS supporta il多点 tocco. Firefox 6+ e Chrome per desktop supportano anche gli eventi di tocco.
2. Eventi di gesture
Safari 2.0 per iOS ha introdotto un insieme di eventi di gesture. Quando due dita toccano lo schermo viene generato un gesture, che di solito cambia la dimensione dell'elemento visualizzato o lo ruota. Ci sono tre eventi di gesture, elencati di seguito.
gesturestart:Viene attivato quando un dito è già premuto sullo schermo mentre un altro dito tocca lo schermo.
gesturechange:Viene attivato quando la posizione di qualsiasi dito sullo schermo cambia.
gestureend:Viene attivato quando qualsiasi dito si allontana dallo schermo.
Questi eventi vengono attivati solo quando entrambi i dita toccano il contenitore dell'evento. Impostare un gestore di eventi su un elemento significa che entrambe le dita devono trovarsi all'interno dell'area dell'elemento per attivare gli eventi di gesture (questo elemento è il target). Poiché questi eventi si propagano, è possibile gestire tutti gli eventi di gesture mettendo il gestore di eventi sul documento. In questo momento, l'elemento target è quello in cui entrambe le dita si trovano all'interno della sua area.
触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时，会触发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);
Come negli esempi di esempio di eventi di tocco precedenti, il codice qui associato ogni evento a una funzione comune e poi esporta le informazioni relative a ciascun evento tramite questa funzione.
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per il tuo studio e ti preghiamo di supportare il tutorial di urla.
Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, di proprietà del rispettivo autore. Il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non ha sottoposto il contenuto a elaborazione editoriale e non si assume alcuna responsabilità legale correlata. Se trovi contenuti che violano i diritti d'autore, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito web rimuoverà immediatamente il contenuto sospetto di violazione del diritto d'autore.