Negli script precedenti abbiamo illustrato come sia possibile, anche dal browser, implementare le gesture come ad esempio il tap, tap-hold e swipe.
https://www.html5italia.com/script/26/Gestire-Eventi-Tipo-Touch-HTML5.aspx
https://www.html5italia.com/script/27/Eventi-Tocco-Personalizzati-HTML5.aspx
I più "pigri" potrebbero trovare migliorabile e poco intuitiva l'operatività illustrata in questi script, accogliendo con favore librerie che, come HammerJS, possono facilitare il lavoro e ridurre il codice necessario per implementare le gesture.
HammerJS è una libreria Javascript, disponibile qui:http://eightmedia.github.com/hammer.js/, che vanta le seguenti caratteristiche:
- gestione semplificata degli eventi touch e soprattutto, multi-touch!
- facilmente integrabile
- peso ridotto a 2kb
- disponibile come plugin di jQuery
Ecco come nella pratica, HammerJS consente di implementare le gesture Tap, Double Tap, Swipe, Hold, Transform/Pinch, Drag in un sito web (o mobile web):
<!doctype html> <html> <head> </head> <body> <div id="touchArea"></div> <div id="logArea"></div> <script src="../query.min.js"></script> <script src="../hammer.js"></script> <script src="../jquery.hammer.js"></script> </body> </html>
var log = $("#logArea"); function writeLog(str) { log.prepend(str +"<br>"); } $("#touchArea").hammer({ prevent_default: false, drag_vertical: false }) .bind("hold tap doubletap transformstart transform transformend dragstart drag dragend release swipe", function(event) { writeLog(event.type); //disponibili anche: //event.direction (right, left...) //event.distance (per valutare l'intervallo in pixel interessato dalla gesture) });
E' evidente che, utilizzando questa libreria, la sintassi risulta semplificata ed allo stesso tempo la varietà delle gesture supportate copre la maggioranza degli scenari touch-based.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestire domini wildcard in Azure Container Apps
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Gestire la cancellazione di una richiesta in streaming da Blazor
Limitare le richieste lato server con l'interactive routing di Blazor 8
Creare moduli CSS in React
Usare una container image come runner di GitHub Actions
Eseguire le GitHub Actions offline
Utilizzare la libreria Benchmark.NET per misurare le performance
Load test di ASP.NET Core con k6
Creare form tipizzati con Angular
Gestire undefined e partial nelle reactive forms di Angular
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions