Comportamiento interactivo en Javascript con deslizamiento táctil, sin elemento canvas

Las siguientes muestras tienen como fundamento los eventos de puntero de mouse y de toque táctil (mouse y touch events ), ya reseñados en las siguientes secciones: para mouse y para touch. Allí también intento explicar cómo todos esos recursos estan agrupados en APIs; es decir, conjuntos de código útil conocido como Interface de programación de aplicaciones, usado para determinadas soluciones en desarrollo web y otros.

También me ayudo en la muy detallada explicación técnica que da Matt Hinchliffe en su artículo High performance touch interactions, del 2015.

Uso de eventos mousemove, mouseup, touchmove, touchend

Aquí será mostrada la combinación de dos tipos de eventos que facilitarán la interacción desde el usuario, con puntero de mouse y táctil al mismo tiempo. Tener en cuenta que, a la fecha, ya existe una nueva API que combina ambas interacciones: la API Pointer Events, reseñada en otra sección.

mousemove, mouseup

Para empezar, determinemos lo siguiente: los eventos de puntero de mouse (mousemove y mouseup) leerán datos de ubicación según la cantidad de pixeles recorridos durante el arrastre o el deslizamiento de un elemento interactivo indicado. mousemove leerá esos datos cuando el puntero ingrese al área interactiva; y mouseup los leerá cuando se presione + suelte sobre el área de ese mismo elemento.

touchmove, touchend

Por otro lado, los eventos de toque táctil (touchmove y touchend) leerán la cantidad de pixeles recorridos durante el deslizamiento táctil sobre el área de un elemento interactivo. touchmove lo hará cuando haya contacto entre el puntero y el elemento; y touchend cuando el dedo toque y deje de tocar el elemento interactivo.

A tener en cuenta: límites de las áreas de interacción del elemento interactivo

Todo elemento interactivo esta enmarcado en un área que lo limita (y del que no puede excederse). Esta área puede ser el marco de la ventana del navegador o alguna otra área contenedora.

Todo elemento interactivo esta enmarcado en un área que lo limita (y del que no puede excederse). Esta área puede ser la ventana del navegador o alguna otra área contenedora de ese elemento interactivo.

Las propiedades .innerWidth, e .innerWidth obtienen datos de las dimensiones de ese contenedor. Solo deben ser definidos correctamente. En el código siguiente ambos códigos apuntan a un solo elemento contenedor. Del que luego se tomarán los datos (en tiempo real) de las dimensiones que serán usadas como límites de la imagen interactiva contenida en uno de ellos.

En Javascript

// Dimensiones contenedor navegador
var areaBrowser = document.getElementById("navegador");
// Toma el ancho
window.innerWidth;
// Toma el alto
window.innerHeight;

// Dimensiones contenedor recuadro cualquiera
var areaCuadro = document.getElementById("cuadro");
// Toma el ancho
areaCuadro.innerWidth;
// Toma el alto
areaCuadro.innerHeight;

Dicho lo anterior y según la sintaxis de Javascript para el uso de eventos de puntero (táctil o de mouse) detallo las propiedades aplicadas para los elementos (y su direccionamiento) ejecutados para dar con el resultado mostrado más abajo. Recordar: estas propiedades son parte de los métodos insertados en la API, por lo que siempre estarán apuntando a un elemento previo (por ejemplo, a uno cuyo identificador lo nombramos como ele):

• Propiedades usadas para captar posición y dimensiones
• ele.getBoundingClientRect(); capta entre cuatro a ocho valores de dimensión y ubicación de un elemento apuntado (ele.) en relación al viewport del navegador.
• ele.touches; crea un listado de todas las acciones de toque (o puntos de contacto de puntero) sobre un área de algún elemento interactivo. Alerta: a agosto del 2024 esta propiedad no esta soportada para navegadores Safari.
• ele.pageX; y ele.pageY; captura coordenadas de ubicación (X, horizontales; Y verticales) del puntero del mouse, pero dentro de un área indicada como interactiva. Fuera de esta área nada es captado. Para evento táctil, solo leerá la ubicación del toque.
• DOMRectRead: width, height, top, bottom, left, X, Y propiedades de instancia del método DOMRect de solo lectura (es decir, no modifica esos valores). En otras palabras, debe haber un var a = ele. getBoundingClientRect(); previamente, y así leer a.width;.
• window. requestAnimationFrame (function()) método que indica al navegador que se está realizando una actualización de una secuencia de fotograma animado.
• ele.removeEventListener("evento", nombreFuncion, booleano) remueve un detector de eventos. El tercer valor booleano refiere a que el evento será eliminado en la fase de captura o durante la activación del evento (valor booleano true); o en la fase de bubbling (false, este valor es predeterminado y no se muestra como argumento).

Debemos recordar que Javascript ejecuta los eventos durante tres escenarios en donde ocurren la conexión del evento (hacer click, por ejemplo) con su activador (sobre un botón). A estos escenarios se los conoce como fases de propagación, ya que el evento se propaga desde la estructura del DOM hacia el elemento activador.

Muy similar a cuando un jugador de fútbol debe dirigirse desde el centro del campo hacia el arco contrario, con el objetivo de hacer un gol. Según ese ejemplo, el jugador (el posible evento) debe pasar por tres fases antes de meter la pelota en el arco (el activador). Las fases de propagación son tres: de captura (capturing), de direccionamiento (targeting) y de burbujeo o de ascendencia (bubbling).

• Fases de captura de eventos en Javascript
• Si un evento ocurre, entonces esa alerta va desde la estructura DOM hacia el elemento de activación. Sin embargo, el el eventHandler aún no es ejecutado.
• Capturing: Si un evento ocurre, entonces esa alerta va desde la estructura DOM hacia el elemento de activación. Sin embargo, el eventHandler aún no es ejecutado.
• Targeting: Cuando el evento ha activado el elemento objetivo. Aquí es donde el activador eventHandler ejecuta todo su contenido.
• Bubbling: El evento ya activado retorna hacia el interior del DOM, pero aún pueden seguir ejecutándose otros activadores de eventos.