Con la llegada de HTML5 al mundo del desarrollo web, la forma de crear aplicaciones web ha cambiado de manera muy significativa, ahora bien, JAVASCRIPT no es HTML, pero sí es un elemento de gran importancia para todo lo que significa y se ha logrado con la quinta versión del lenguaje de etiquetas, donde los desarrolladores tienen a mano nuevos elementos. Estos son soportados por nuevas o mejoradas APIS JAVASCRIPT. Aunque no podemos olvidar que la versión tres de CSS ha contribuido en gran medida a una nueva forma versátil y adaptable de visualizar por parte de los usuarios y a crear aplicaciones web por parte de los desarrolladores y diseñadores, con una sutileza semántica.

Todo ha cambiado y JAVASCRIPT lo ha hecho, dando un amplio soporte a dispositivos móviles como smartphones y tablets, además de servir como pilar de nuevos y asombrosos elementos HTML como el CANVAS, donde se construye cualquier cantidad de gráficos a través de JAVASCRIPT, pero en estos momentos lo que nos interesa de las nuevas herramientas del popular lenguaje web del lado del cliente, es el soporte que da al manejo de eventos “Touch”, extendiendo las APIS que tienen como tarea manejar todo lo referente a este tema.

En el presente artículo estudiaremos los diferentes eventos Touch que podemos procesar o manejar con JAVASCRIPT, además de algunos otros aspectos que son de gran importancia para desarrollar aplicaciones que requieran manejos de eventos Touch. Es importante decir que èste es el primero de una serie de artículos, que tienen como fin u objetivo brindar un esquema de orientación donde veremos brevemente algunos usos que

Tipos de eventos Touch

Los dispositivos táctiles trabajan sin ningún problema en cualquier aplicación web, sus navegadores móviles hacen que los eventos de ratón como el clic, terminen por convertirse en un evento Touch, por eso, al hacer una aplicación web, ésta funciona aunque sea procesando eventos del ratón. Ahora se han agregado a JAVASCRIPT una interesante gama de eventos Touch, que a pesar de ser solo de tres tipos, podemos hacer una combinación de los mismos, y así se obtienen mejores resultados. Estos tipos de eventos son:

• touchstart: Este se genera al hacer cualquier toque a la pantalla, sin importar su duración o movimientos realizados.
• touchend: Este se ejecuta una vez se deja de tocar la pantalla o el objeto que tiene asignado el manejador de eventos.
• touchmove: Este es ejecutado una vez se desliza o desplaza el dedo el usuario, por encima de la pantalla u objeto que está siendo controlado a través del manejador de eventos.

Son tres eventos, los cuales son muy simples de entender, con ellos obtenemos aplicaciones web móviles, que sean más dadas a estos entornos táctiles.

Herramientas adicionales de los eventos Touch

Hasta ahora ya sabemos que contamos con tres tipos de eventos Touch, éstos, a su vez, tienen una serie de elementos que complementan todo el manejo y procesamientos que se generan tras la interacción de un usuario a través de un dispositivo táctil.

Es importante mencionar que cada evento Touch posee una lista de propiedades en común que vendrían siendo el complemento del que se hablaba anteriormente. Hay tres propiedades que están ligadas de forma directa al Touch, que son:

• touches: Es una lista de todos toques que se han generado en la pantalla, tiene poca utilidad y suele ser poco usada.
• targetTouches: Éste guarda una lista de la cantidad del evento que se ha generado en un elemento del DOM.
• changedTouches: Éste guarda una lista de todos cambios que se producen hasta llegar al evento Touch, por ejemplo, en un touchsend puede haber un touchstart y un touchmove.

Hay otro grupo de propiedades encargado de guardar informacion sobre el evento, las cuales son:

• identifier: Un número único que identifica de forma única cada toque generado durante una sesión.
• target: El elemento del DOM en donde se generó el evento.
• client/ page/ screen: Información de la pantalla, relevante sobre acciones que genera el evento.
• radius coordinates and rotationAngle: Describe una aproximación de las elipses generadas.

Procedimiento para asignar un evento Touch

Los eventos Touch de JAVASCRIPT no cambian para nada el esquema que normalmente se usa para crear manejadores en este lenguaje, así que para iniciar, no se está hablando de diferencias a la hora de asignar un manejador de eventos Touch, antes que cambiar los eventos se han extendido, así que ahora podemos asignar a cualquier elemento del DOM uno o varios de los tres eventos mencionados algunos párrafos anteriores de éste artículo.

Para facilitar un poco la explicación, veamos algo de código sencillo, iniciaremos por obtener la referencia a través de métodos del DOM.

//Obtenemos el elemento con el que vamos a trabajar
var elementoTouch= document.getElementById("areaTactil");

Esto no es nada desconocido para los entendidos de JAVASCRIPT, pero si no sabes a cerca del tema, puedes revisar los manuales de JAVASCRIPT que se encuentran a disposición en Desarrolloweb.com. Lo que viene a continuación es la asignación del manejador del evento, además de algunos datos sobre el elemento, como las coordenadas donde se ha llevado a cabo el toque de pantalla.

//posteriormente asignamos el manejador de eventos lo cual
// se hace de manera convencional.
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) { 
var touch = event.targetTouches[0]; 
// con esto solo se procesa UN evento touch
alert(" se ha producido un touchstart en las siguientes cordenas: X " + touch.pageX + " en Y " + touch.pageY);
}

}, false);

En este caso se está manejando un solo evento.

Datos adicionales en el trabajo con Eventos Touch de JavaScript

Para acabar este artículo dedicada a los eventos Touch de JavaScript vamos a explicar como hacer comportamientos de arrastre y Multi Touch, entre otras cosas.

Hasta este punto ya hemos podido entender cómo proceder ante el manejo de eventos Touch en aplicaciones Web móvil, un mercado que crece cada día. Por tal razón es que estos dispositivos avanzan de forma acelerada, con un crecimientos abrumador en variedad y avances de herramientas con las que cuentan teléfonos inteligentes y tabletas, que hacen uso de pantallas táctiles para la interacción directa con el usuario. La evolución ha llevado a la concepción de dispositivos multi-Touch, capaces de responder a varios eventos al tiempo, esto ha abierto la puerta a una nueva generación de aplicaciones que están dirigidas a estos sofisticados y avanzados dispositivos, y sólo es posible en tabletas y teléfonos inteligentes de última generación, con sistemas operativos que implementen esta tecnología, pues esta no solo depende del hardware.

Ante este escenario, JavaScript también se preparó para ser capaz de responder a eventos mult-Touch, haciéndolo de una forma muy sencilla, tal como se han venido manejando los eventos Touch en esta serie de artículos, siendo este el tercero, precedido de los artículos "Un vistazo a los nuevos eventos Touch de JavaScript" y "combinando Eventos Touch de JavaScript". En este donde se pretende rematar los apuntes finales dedicados de mi parte a los eventos Touch de JavaScript, veremos cómo hacer objetos arrastrables, haciendo uso de los eventos Touch, además de cómo procesar múltiples eventos Touch, dirigido a dispositivos avanzados, pero si tu terminal no tiene soporte multi-Touch, de igual forma el ejemplo funcionará, solo que con un solo eventos a la vez.

Haciendo un objeto arrastrable gracias a los eventos Touch

Para engrosar un poco los ejemplos que hemos desarrollado en esta serie de artículos que hemos dedicado al estudio de los eventos Touch a través del lenguaje de la web JavaScript, vamos a crear un ejemplo que, aunque muy simple, nos dará a conocer una forma de hacer un objeto arrastrable. A continuación crearemos un elemento div el cual se podrá mover por la pantalla gracias al deslizamiento que haga el usuario. Para hacerlo posible vamos a usar el evento touchmove, haciendo muy fácil la implementación del ejemplo, pero bueno veamos el código que usamos para lograr eso:

var obj=document.gelElmentById("objArrastrable");           
obj.addEventListener('touchmove', function(event){
    if (event.targetTouches.length == 1) { 
       var touch = event.targetTouches[0]; 
       // con esto solo se procesa UN evento touch
       obj.style.left = touch.pageX + 'px';
       obj.style.top = touch.pageY + 'px';
    } 
       }, false);

Es importante destacar que ese elemento debe tener algunas reglas de estilo CSS, para poder llevar a feliz término el desarrollo del ejemplo en mención. Inicialmente hay que poner la posición en absoluta del objeto, de lo contrario no se moverá por la pantalla, también debe tener en el estilo CSS los atributos que son modificados a través de los métodos del DOM, es decir, haciendo uso de JavaScript. Como se puede apreciar en el ejemplo, por mi parte hice un pequeño estilo con el fin de poder llevar a cabo la ejecución del ejemplo, estilo que comparto con ustedes, aunque no está de más decir que no se hace realmente algo extraordinario.

#objArrastrable{
          border: #000 solid 2px;
          position: absolute;
          width:100px;
          height: 100px;
          top: 450px;
          left: 100px;
       }

Con este simple estilo, lo único que garantizamos es la ejecución del ejemplo y será decisión tuya si quieres agregar algo más para mejorar de forma visual tus ejemplos o proyectos que hagan uso de los eventos Touch de JavaScript.

Haciendo un canvas dibujable por el usuario de forma multi Touch

Para quienes hayan aprendido programación Java, quizás hayan podio toparse con un ejemplo muy famoso: es un pequeño espacio donde, al hacer un arrastre con el ratón, se iba dibujando un punto. Este ejemplo aparece en un popular libro de programación, donde lo usaban para enseñar el procesamiento de eventos que se pueden generar con el ratón del ordenador. Traemos a colación ese viejo recuerdo, pues ahora haremos algo parecido, pero nosotros no estamos hablando de eventos del ratón de una computadora, sino de eventos Touch de un dispositivo móvil. Tampoco lo programaremos en Java, sino en JavaScript, usando el elemento canvas de HTML5.

El ejemplo realmente no hace nada diferente a lo explicado en esta serie de artículos, dedicados fielmente al manejo de eventos Touch. El único cambio drástico es que será capaz de responder a múltiples eventos a la vez, para lo cual creamos un código como el siguiente:

canvas.addEventListener('touchmove', function(event) { 
    for (var i = 0; i < event.touches.length; i++) { 
   var touch = event.touches[i]; 
    ctx.beginPath();
    ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
    ctx.fill(); 
    ctx.stroke();
    } 
}, false);

Como se puede apreciar, procesar múltiples eventos es muy sencillo, sólo hay que hacer un ciclo que itere a través de la lista del objeto touches del evento; de esta forma respondemos a todos los eventos touchmove generados en el canvas. No está de más recordar que el funcionamiento de este ejemplo no está garantizado en todos los dispositivos. Su uso está garantizado en iPad dos, Motorola Xoom, donde se ha probado el funcionamiento de este ejemplo.

También compartimos el código completo del ejemplo, además de la opción de verlos en funcionamiento en una página aparte.

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Estacando eventos Touch</title>
    <meta charset="utf-8" />
    <script>
       function inicia(){
          var obj=document.getElementById("objArrastrable");
          
           var canvas = document.getElementById('objeto'); 
           var ctx= canvas.getContext('2d'); 
obj.addEventListener('touchmove', function(event){
    if (event.targetTouches.length == 1) { 
       var touch = event.targetTouches[0]; 
       // con esto solo se procesa UN evento touch
       obj.style.left = touch.pageX + 'px';
       obj.style.top = touch.pageY + 'px';
    } 
       }, false);        
       
   canvas.addEventListener('touchmove', function(event) { 
    for (var i = 0; i < event.touches.length; i++) { 
   var touch = event.touches[i]; 
    ctx.beginPath();
    ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
    ctx.fill(); 
    ctx.stroke();
    } 
}, false);    
   }
    </script>
    
    <style>
       #objArrastrable{
          border: #000 solid 2px;
          position: absolute;
          width:100px;
          height: 100px;
          top: 450px;
          left: 100px;
       }
    </style>
</head>
    <body onLoad="inicia();">
      <canvas width="450" height="350" style="border: #000 solid 3px; " id="objeto"></canvas>
      <div id="objArrastrable">
         Objeto arrastrable
      </div>
    </body>
</html>

Esperamos que todo esto te haya ayudado a entender más acerca de los eventos táctiles en Javascript.