Eventos touch

Categories:

Ya revisamos cómo asociar eventos con nodos del DOM. Los eventos mencionados contemplan el uso el teclado y del cursor – mouse, trackpad o dispositivos táctiles que utilizan de manera predefinida los eventos para los otros dispositivos – para interactuar con el DOM. ¿Qué pasa si queremos utilizar eventos para dispositivos táctiles? En ese caso podemos utilizar la especificación TouchEvents.

Para conocer esta especificación vamos a comenzar con el evento en sí para ir hacia la definición de cada evento. La especificación tiene tres interfaces:

TouchEvent, TouchList, Touch.

TouchEvent

Define los tipos de evento posibles:

Evento

Descripción

Acción predeterminada

touchstart

El evento se dispara en el momento en el que se posiciona un punto de contacto (dedo o lápiz) en la superficie de contacto (dispositivo). *

undefined

touchmove

El evento se dispara cuando se mueve un punto de contacto (dedo o lápiz) sobre la superficie (dispositivo). *

undefined

touchend

El evento se dispara cuando se mueve un punto de contacto (dedo o lápiz) fuera de la superficie (dispositivo). *
También incluye los casos donde el punto de contacto deja la superficie de contacto de manera física, por ejemplo al ser arrastrado fuera de la pantalla.

Varía: mousemove, mousedown, mouseup, click

touchcancel

El evento se dispara cuando el punto de contacto se altera (o interrumpe) de una manera específica.

Este evento también se puede disparar cuando se utilizan más puntos de contacto sobre la superficie que los que el dispositivo (o implementación) está configurado para almacenar, en este caso el primer objeto Touch debe ser removido.

El punto o puntos de contacto que fueron removidos deben ser incluidos en el atributo changedTouches de TouchEvent, y no deben ser incluidos en los atributos touches y targetTouches.

ninguna

* Si se manda llamar el método preventDefault dentro de este evento, debe prevenir cualquier acción predeterminada causada por cualquiera de los otros eventos de contacto asociados al mismo punto de contacto activo, incluyendo eventos del cursor (mouse / trackpad) o desplazamientos (scrolling).

Para interactuar con los ejemplos – en caso de no tener un dispositivo con pantalla táctil o no querer configurar una red local para visualizar los archivos – se pueden utilizar las herramientas para desarrolladores de Google Chrome.

En la consola seleccionar Emulación y habilitar Emular pantalla táctil.

Emular pantalla táctil en Google Chrome
Emular pantalla táctil en Google Chrome

Orden de los eventos (cursor)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Eventos Touch</title>
    <style>
    #sensible { width: 600px; margin: 1em auto; padding: 0.5em; text-align: center; border: 1px dashed #c9c9c9; display: block;}
    </style>
  </head>
  <body>
    
    <div id='sensible'>
        Área sensible 
    </div>
        
    <pre id='log'>          
    </pre>
<script>
var sensible = document.getElementById('sensible');
var log = document.getElementById('log');    

function nombrar_evento(evento) { 
  log.innerHTML += 'evento: ' + evento.type + "\n";
}   

// Eventos del cursor (mouse)
sensible.addEventListener('mouseenter', nombrar_evento , false);
sensible.addEventListener('mouseleave', nombrar_evento , false);    
sensible.addEventListener('mousedown', nombrar_evento , false);
sensible.addEventListener('mousemove', nombrar_evento , false);
sensible.addEventListener('mouseup', nombrar_evento , false);    
sensible.addEventListener('click', nombrar_evento , false);    
</script>
  </body>
</html>

En este caso se busca mostrar el orden de ejecución de los eventos asociados al cursor sobre un elemento. Por ejemplo:

1. Si el cursor está fuera del área sensible inicia con:
mouseenter

2a. Si se presiona el botón del ratón o del trackpad.
mousedown
mouseup
click

2b. Si se presiona el botón del ratón o del trackpad y se arrastra – drag – ya no se ejecutan los eventos mouseup ni click.
mousedown

3. Si está dentro y sale del área sensible.
mouseleave

Orden de los eventos (touch)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Eventos Touch</title>
    <style>
    #sensible { width: 600px; margin: 1em auto; padding: 0.5em; text-align: center; border: 1px dashed #c9c9c9; display: block;}
    </style>
  </head>
  <body>
    
    <div id='sensible'>
          Área sensible
    </div>
      
    <pre id='log'>          
    </pre>

<script>
var sensible = document.getElementById('sensible');
var log = document.getElementById('log');    

function nombrar_evento(evento) {   
  log.innerHTML +='evento: ' + evento.type + "\n";
}   

// Eventos touch
sensible.addEventListener('touchstart', nombrar_evento , false);
sensible.addEventListener('touchmove', nombrar_evento , false);
sensible.addEventListener('touchend', nombrar_evento , false);
sensible.addEventListener('touchcancel', nombrar_evento , false);

</script>
  </body>
</html>

Aquí se busca obtener el orden de ejecución de los eventos asociados únicamente a los eventos touch. Por ejemplo:

1. Al presionar el cursor:
touchstart

2. Si se arrastra el cursor al presionar y existe un desplazamiento:
touchmove

3. Soltar el botón
touchend

Orden de los eventos (touch / cursor)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Eventos Touch</title>
    <style>
    #sensible { width: 600px; margin: 1em auto; padding: 0.5em; text-align: center; border: 1px solid #c9c9c9; display: block;}
    </style>
  </head>
  <body>
    
    <div id='sensible'>
          Área sensible
      </div>
      
    <pre id='log'>          
    </pre>


<script>
var sensible = document.getElementById('sensible');
var log = document.getElementById('log');

function nombrar_evento(evento) { 
  log.innerHTML +='evento: ' + evento.type + "\n";
}   
    
// Eventos touch
sensible.addEventListener('touchstart', nombrar_evento , false);
sensible.addEventListener('touchmove', nombrar_evento , false);
sensible.addEventListener('touchend', nombrar_evento , false);
sensible.addEventListener('touchcancel', nombrar_evento , false);

// Eventos del cursor (mouse)
sensible.addEventListener('mouseenter', nombrar_evento , false);
sensible.addEventListener('mouseleave', nombrar_evento , false);    
sensible.addEventListener('mousedown', nombrar_evento , false);        
sensible.addEventListener('mousemove', nombrar_evento , false);
sensible.addEventListener('mouseup', nombrar_evento , false);    
sensible.addEventListener('click', nombrar_evento , false);    

</script>
  </body>
</html>

Ahora vamos a revisar el orden de los eventos cuando se combinan los que están asociados al cursor y los que están asociados a los dispositivos táctiles.

1. Al presionar dentro del área sensible:
mouseenter
touchstart
mousedown
touchend
mouseup
click

2. Al presionar y arrastrar dentro del area sensible:
mouseenter
touchstart
mousedown
touchmove
touchend

3. Presionar fuera, arrastrar hacia el área sensible y salir del área sensible:
mouseenter
mouseleave

4. Presionar dentro y salir:
mouseenter
touchstart
mousedown
touchmove
mouseleave
touchmove
touchend

Además de los eventos touchEvents tiene distintos atributos.

Atributo

Descripción

touches

Una lista de objetos Touch por cada punto de contacto que actualmente se encuentre
tocando la superficie.

changedTouches

Una lista de objetos Touch por cada punto de contacto que contribuyó al evento.

  • Para el evento touchstart, esta debe ser una lista de puntos de contacto que llegaron a ser activos
    con el evento actual.
  • Para el evento touchmove, esta debe ser una lista de puntos de contacto que se movieron desde el último evento
  • Para los eventos touchend y touchcancel, esta deber ser una lista puntos de contacto que se retiraron de la superficie.

targetTouches

Una lista que contiene un objeto Touch para cada punto de contacto que esté tocando la superficie y que inicio en el elemento que es
el objetivo del evento actual.

altKey

Devuelve true si la tecla alt está activada al momento que sucede el evento.

metaKey

Devuelve true si la tecla alt está activada al momento que sucede el evento.

ctrlKey

Devuelve true si la tecla ctrl está activada al momento que sucede el evento.

shiftKey

Devuelve true si la tecla shift está activada al momento que sucede el evento.

Ya que revisamos cómo desencadenar los eventos, vamos a inspeccionar más a detalle cada evento.

touchList

Define una lista de puntos de contacto individuales para un evento touch.

Esta interfaz contiene un atributo – length – que devuelve el número de puntos de contacto en la lista.

También tiene un método item al que se le especifica un índice para obtener el objeto touch que se encuentra en esa posición.

En este caso podemos hacer un ciclo para inspeccionar cada elemento dentro de la lista.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Eventos Touch</title>
    <style>
    #sensible { width: 600px; margin: 1em auto; padding: 0.5em; text-align: center; border: 1px solid #c9c9c9; display: block;}
    </style>
  </head>
  <body>
    
    <div id='sensible'>
          Área sensible 
      </div>
      
    <pre id='log'>          
    </pre>


<script>
var sensible = document.getElementById('sensible');
var log = document.getElementById('log');    

sensible.addEventListener('touchstart', nombrar_evento , false);

function nombrar_evento(evento) { 
   // Touch List en targetTouches
   log.innerHTML += 'targetTouches: ' + evento.targetTouches + "\n";

   for (var i = 0; i < evento.targetTouches.length; i++) {
     log.innerHTML += 'targetTouches ' + i + ": " + evento.targetTouches.item(i) + "\n";
   }
 
   // Touch List en changedTouches
   log.innerHTML += 'changedTouches: ' + evento.changedTouches + "\n";     

   for (var i = 0; i < evento.changedTouches.length; i++) {
     log.innerHTML += 'changedTouches ' + i + ": " + evento.changedTouches.item(i) + "\n";
   }

   // Touch List touches
   log.innerHTML += 'touches: ' + evento.touches + "\n";     

   for (var i = 0; i < evento.touches.length; i++) {
     log.innerHTML += 'touches ' + i + ": " + evento.touches.item(i) + "\n";
   }

}   
 </script>
  </body>
</html>

touch

Describe un punto de contacto individual para un evento touch. Aquí podemos tener datos más detallados acera del elemento.

Atributo

Descripción

identifier

Un número de identificación único para cada punto de contacto.
Cuando un punto de contacto se activa se le debe asignar un identificador distinto a los existentes.
Mientras el punto de contacto se mantenga activo, todos los eventos que hagan referencia a el deben asignar el mismo identificador.

target

El objetivo del evento – “EventTarget” – en el cual el punto de contacto se inició cuando se posicionó por primera vez en la superficie, aún si el punto de contacto se ha movido fuera del área interactiva de ese elemento.

screenX

La coordenada horizontal del punto relativo a la pantalla en pixeles.

screenY

La coordenada vertical del punto relativo a la pantalla en pixeles.

clientX

La coordenada horizontal del punto relativo al viewport en pixeles, con exclusión de cualquier desplazamiento (scroll) de desplazamiento (offset).

clientY

La coordenada vertical del punto relativo al viewport en pixeles, con exclusión de cualquier desplazamiento (scroll) de desplazamiento (offset).

pageX

La coordenada horizontal del punto relativo al viewport en pixeles, incluyendo cualquier desplazamiento (scroll) desplazamiento (offset).

pageY

La coordenada vertical del punto relativo al viewport en pixeles, incluyendo cualquier desplazamiento (scroll) desplazamiento (offset).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Eventos Touch</title>
    <style>
    #sensible { width: 600px; margin: 1em auto; padding: 0.5em; text-align: center; border: 1px solid #c9c9c9; display: block;}
    </style>
  </head>
  <body>
    
    <div id='sensible'>
          Área sensible 
      </div>
      
    <pre id='log'>          
    </pre>


<script>
var sensible = document.getElementById('sensible');
var log = document.getElementById('log');    

// Se visualizan los datos al presionar el área sensible y al  arrastrar el cursor dentro del área sensible.
sensible.addEventListener('touchstart', nombrar_evento , false);
sensible.addEventListener('touchmove', nombrar_evento , false);

function nombrar_evento(evento) {  
 for (var i = 0; i < evento.touches.length; i++) {
   log.innerHTML += "----------\n";
   log.innerHTML += 'Identificador: ' + evento.touches.item(i).identifier + "\n";
   log.innerHTML += 'Objetivo: ' + evento.touches.item(i).target.nodeName + "#" + evento.touches.item(i).target.id + "]\n";
   log.innerHTML += '[screenX | screenY]: [' + evento.touches.item(i).screenX + " | " + evento.touches.item(i).screenY + "]\n";
   log.innerHTML += '[clientX | clientY]: [' + evento.touches.item(i).clientX + " | " + evento.touches.item(i).clientY + "]\n";
   log.innerHTML += '[pageX   | pageY  ]: [' + evento.touches.item(i).pageX + " | " + evento.touches.item(i).pageY + "]\n";
 }
}   
</script>
  </body>
</html>

Descargar ejemplos de referencia .