Nello script precedente abbiamo introdotto gli eventi di tipo touch previsti dal W3C per gestire l'interazione dell'utente con il dispositivo attraverso il tocco.
Intercettando gli eventi di base touchstart, touchend e touchmove e combinandoli opportunamente con della semplice logica JavaScript è possibile creare degli eventi di tocco personalizzati, come ad esempio:
- tap: l'equivalente del click del mouse, scatenato toccando e rilasciando il dito in un punto del display;
- longTap: un tocco prolungato del dito sul display;
- swipe: quando il dito viene strisciato sul display (in qualsiasi direzione);
- swipeLeft: il dito viene strisciato sul display verso sinistra
- swipeRight: il dito viene strisciato sul display verso destra
- swipeUp: il dito viene strisciato sul display verso l'alto
- swipeDown: il dito viene strisciato sul display verso il basso
L'esempio seguente mostra tutto il codice necessario per intercettare il tocco sul documento, registrare gli eventi personalizzati descritti sopra e intercettarli per un elemento del DOM:
<!doctype html> <html> <head> <title>Touch Events</title> <style> div#touchArea { padding: 15px; background: #c00; color: #fff; font-size: 18pt; } </style> <script> function log(event) { touchArea.innerHTML = event.type; }; function fireEvent(element, event) { var e = document.createEvent("HTMLEvents"); // use HTML event module; alternatives: "UIEvents"/initUIEvent(), "MouseEvents"/initMouseEvent(), etc. e.initEvent(event, true, true); return !element.dispatchEvent(e); }; var touch = {}; // start, x1, y1, x2, y2, doubleTap, target var tapTimeout; function touchHandler(event) { var now = Date.now(); switch (event.type) { case "touchstart": if (touch.start && now - touch.start < 250) touch.doubleTap = true; touch.start = Date.now(); touch.x1 = event.touches[0].pageX; touch.y1 = event.touches[0].pageY; touch.target = ("tagName" in event.touches[0].target) ? event.touches[0].target : event.touches[0].target.parentNode; // if text node target is parent break; case "touchmove": touch.x2 = event.touches[0].pageX; touch.y2 = event.touches[0].pageY; break; case "touchend": if (touch.doubleTap) { window.clearTimeout(tapTimeout); fireEvent(touch.target, "doubleTap"); touch = {}; return; } if (touch.x2 > 0 || touch.y2 > 0) { var deltaX = touch.x1 - touch.x2; var deltaY = touch.y1 - touch.y2; if (Math.abs(deltaX) > 30 || Math.abs(deltaY) > 30) // min 30px { fireEvent(touch.target, "swipe"); // generic swipe if (Math.abs(deltaX) >= Math.abs(deltaY)) // horizontal { if (deltaX > 0) fireEvent(touch.target, "swipeLeft"); else fireEvent(touch.target, "swipeRight"); } else // vertical { if (deltaY > 0) fireEvent(touch.target, "swipeUp"); else fireEvent(touch.target, "swipeDown"); } touch = {}; return; } } if (touch.start && now - touch.start > 500) // min 500msec { fireEvent(touch.target, "longTap"); touch = {}; return; } tapTimeout = window.setTimeout(function() { fireEvent(touch.target, "tap"); }, 250); // avoid conflict with doubleTap break; case "touchcancel": touch = {}; break; default: // not a touch event return; } }; var touchArea; document.addEventListener("DOMContentLoaded", function() { document.addEventListener("touchstart", touchHandler, true); document.addEventListener("touchmove", touchHandler, true); document.addEventListener("touchend", touchHandler, true); document.addEventListener("touchcancel", touchHandler, true); touchArea = document.getElementById("touchArea"); touchArea.addEventListener("tap", log); touchArea.addEventListener("longTap", log); touchArea.addEventListener("doubleTap", log); touchArea.addEventListener("swipe", log); touchArea.addEventListener("swipeLeft", log); touchArea.addEventListener("swipeRight", log); touchArea.addEventListener("swipeUp", log); touchArea.addEventListener("swipeDown", log); }, false); </script> </head> <body> <div id="touchArea">Touch me!</div> </body> </html>
Nota: molte librerie specifiche per browser mobile (jQuery Mobile, jqMobi, Zepto, ecc.) forniscono implementazioni di eventi personalizzati analoghe a quella mostrata nello snippet precedente.
Link e riferimenti utili
Script #26, "Gestire gli eventi di tipo touch con HTML5"https://www.html5italia.com/script/26/Gestire-Eventi-Tipo-Touch-HTML5.aspx
Le specifiche del W3C per gli eventi di tocco (Touch Events)
http://www.w3.org/TR/touch-events/
Il nostro speciale sullo sviluppo web mobile
https://www.aspitalia.com/focuson/1267/Speciale-Web-Mobile-Costruire-Applicazioni-ASP.NET-JQuery-Mobile.aspx
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire operazioni con timeout in React
Creare moduli CSS in React
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Elencare le container images installate in un cluster di Kubernetes
Miglioramenti nelle performance di Angular 16
Eseguire operazioni sui blob con Azure Storage Actions
Installare le Web App site extension tramite una pipeline di Azure DevOps
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Reactive form tipizzati con modellazione del FormBuilder in Angular
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Inizializzare i container in Azure Container Apps
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Paginare i risultati con QuickGrid in Blazor
- Ottimizzazione dei block template in Angular 17