Dall'archivio script > HTML5

Gestire gli eventi di tipo touch con HTML5

di Matteo CasatiMatteo Casati,

Comunemente i dispositivi touchscreen gestiscono l'interattività mappando le azioni dell'utente sugli eventi del mouse. Tuttavia interpretare in questo modo il tocco fisico, normalizzando i dati degli eventi a quanto avremmo con un cursore, può costituire un limite per la realizzazione della miglior esperienza utenza possibile.
Le specifiche Touch Events risolvono questi problemi, consentendo alle applicazioni web di gestire direttamente gli eventi di tocco.

Sono previsti 4 tipi di TouchEvent:

  • touchstart: scatenato quando l'utente innesca un nuovo punto di contatto sullo schermo;
  • touchend: scatenato quando l'utente rimuove un punto di contatto, staccando il dito dalla superficie dello schermo o trascinando il tocco all'esterno del display;
  • touchmove: scatenato quando l'utente muove il dito a contatto con il display, spostando il punto di contatto;
  • touchcancel: scatenato quando un punto di contatto viene eliminato programmaticamente o spostato all'esterno del documento

L'esempio seguente mostra come intercettare gli eventi di tocco, disegnando una serie di marcatori (dei DIV all'interno del documento) in corrispondenza delle coordinate rilevate:

<!doctype html>
<html>
    <head>
        <title>Touch Events</title>          
        <style>
            html, body { margin: 0; padding: 0; }
            span.point { display: inline-block; opacity: .3; width: 40px; height: 40px; position: absolute; border-radius: 20px; }
            span.touchstart { background: green; }
            span.touchmove { background: blue; }
            span.touchend { background: red; }
        </style>
        <script>
            
            function touchHandler(event)
            {
                if (!event.changedTouches || !event.changedTouches[0]) // not a touch event
                    return;
                console.log(event.type + " X=" + event.changedTouches[0].pageX + " Y=" + event.changedTouches[0].pageY);
                if (event.type == "touchstart" || event.type == "touchcancel")
                    clearAllTouchPoints();
                addTouchPoint(event.type, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
            };
            
            function addTouchPoint(cssClass, x, y)
            {
                var point = document.createElement("span");
                point.setAttribute("class", "point " + cssClass);                
                point.setAttribute("style", "top: " + (y - 20) + "px; left: " + (x - 20) + "px;");
                document.body.appendChild(point);
            };
            
            function clearAllTouchPoints()
            {
                document.body.innerHTML = "";
            };
            
            document.addEventListener("DOMContentLoaded", function()
            {
                document.addEventListener("touchstart", touchHandler, true);
                document.addEventListener("touchmove", touchHandler, true);
                document.addEventListener("touchend", touchHandler, true);
                document.addEventListener("touchcancel", touchHandler, true);
            }, false);
                        
        </script>        
    </head>
    <body></body>
</html>

Il codice è molto semplice: quando il documento è caricato (DOMContentLoaded) agli eventi di tocco viene associata la funzione touchHandler che utilizza la console del browser per tenere traccia degli eventi generati, eventualmente ripulisce l'interfaccia utente e, tramite la funzione
addTouchPoint presenta un marcatore visuale dell'evento (tramite CSS impostati come cerchi semitrasparenti di diversi colori) sul documento.

Note: oltre alle proprietà pageX e pageY usate nell'esempio e relative alle coordinate rispetto alla pagina (incluso l'eventuale scroll del documento), l'interfaccia degli eventi di tipo touch prevede anche screenX e screenY (rispetto allo schermo) e clientX e clientY (rispetto alla pagina, scroll escluso)

Link e riferimenti utili

Le specifiche del W3C per gli eventi di tocco (Touch Events) sono disponibili all'indirizzo 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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi