duduromeroa.com

#Javascript, #APIPointerEvents, #webinteractiva, #Interfaces, #duduromeroa, #Guayaquil

Javascript | DOM | API

Programación para web: combinar eventos táctiles y de puntero de mouse desde APIs


JS, eventos, escuchas de eventos, DOM. www.duduromeroa.com

Por Eduardo Romero
| Guayaquil

Contacto duduromeroa@gmail.com

#Javascript #API

Aclaraciones
Contenido para quienes ya comprenden y practican HTML, CSS y JS. Adjunto bibliografía al final de esta página.


En algunos ejemplos de código añadí espacios entre los caracteres para resaltar la sintaxis. La original NO usa esos espacios.


En casi todos los ejercicios expongo código y comentarios. Puedes revisarlo en: (click derecho en esta página desde mouse > Inspect Element > sources ).



APIs para interacción y disponibilidad de eventos según tipo de interacción

En secciones anteriores ya se revisó lo siguiente: que desde las APIs táctiles o para punteros de mouse muchos eventos no son igual de compatibles para ambas interacciones.

Es necesario revisar esa compatibilidad incluso desde el soporte del navegador que se está aplicando. El sitio caniuse.com permite conocer cuál es la disponibilidad de uso de cada evento pero solo según el navegador.

En la siguiente lista definí qué evento de qué API o objeto DOM es compatible para cada interacción (táctil o de mouse). Sin embargo, eso podría cambiar en cada revisión de la normativa del evento desde la W3C en los próximos meses.

Los eventos de cada API deben ser determinados de la siguiente forma en JS:

En HTML

<body>
  <div id="ID-Elemento"> </div>
</body>

En Javascript

// Variable aloja elemento HTML apuntado
var elementoApuntado = document.getElementById("ID-Elemento");

// Vincula elememto con evento y ejecución de código
// EVENTO: "touchstart", "dblclick", "pointercancel" o cualquiera de esos
elementoApuntado.addEventListener("EVENTO", (event) => { 
// Aqui código a ejecutar {}
});

ATENCIÓN Recordar la sintaxis para cada llamado de elemento HTML desde Javascript, según sea un elemento class o id:


PARA APUNTAR A ELEMENTOS CLASS

En Javascript

// Apuntar a un elemento CLASS
var e = document.getElementsByClassName("CLASS-Elemento");

// Apuntar a más de un elemento CLASS
var e = document.getElementsByClassName("elemento00 elemento01");

// Apuntar al primer elemento CLASS según un identificador
var e = document.getElementsByClassName("elemento00")[0];

// Apuntar a todos los elementos con clase "elemento00" dentro de un elemento ID "elementX"
var e = document.getElementById("elementX").getElementsByClassName("elemento00");


PARA APUNTAR A ELEMENTOS ID

ATENCIÓN El nombre identificador de ID debe ser único y uno solo en el documento HTML


En Javascript

// Para un elemento ID
var e = document.getElementById("elemento00");


PARA APUNTAR A ELEMENTOS SEGÚN SIGNO SELECTOR CLASS(.) O ID(#)

En Javascript

// Apuntar a un elemento CLASS
var e = document.querySelector(".elemento00");

// Apuntar a un elemento ID
var e = document.querySelector("#elemento00");

// Apuntar a un elemento ID según sus propiedades
/* Apuntar al primer elemento <input name="login"/>
ubicado dentro de un elemento con las clases <div class="ele1 ele2"> */
const el = document.querySelector("div.ele1.ele2 input[name='login']");

// NO apuntar a un elemento ID según sus propiedades
// Apuntará al div con la clase ele1 pero no a uno con ele2
var e = document.querySelector("div.ele1:not(.ele2) input[name='login']",
);

  • La siguiente lista fue evaluada en el navegador Opera 102.0.4880.46 en macOS v. 10.13.6 (Para escritorio y móvil). ültima evaluación el 20 de junio del 2024.

API

Admite interacción

Observaciones

API Touch Event

mouse

táctil

touchstart

---

touchmove

---

touchend

---

touchend

---

touchcancel

---

DOM Mouse Event
Eventos

mouse

táctil

---

click

Admite toque táctil al tocar y soltar el toque.

contextmenuz

Necesita del botón derecho del mouse para activar evento

dblclick

Se activa al segundo toque en seguidilla

mousedown

En evento táctil se activa al tocar y soltar

mouseenter

No es un evento congruente con toque táctil.

mouseleave

No es un evento congruente con toque táctil.

mousemove

Admite toque táctil pero es irregular.

mouseout

No es un evento congruente con toque táctil.

onmouseover

No es un evento congruente con toque táctil.

onmouseup

Con evento táctil funciona igual al evento click

API Drag & Drop

mouse

táctil

---

dragstart

drag

dragenter

dragleave

dragover

dragend

API Pointer Events

---

pointerover

Símil del evento mouseover de la API MouseEvent. No activa evento mediante toque táctil.

pointerenter

Solo activa evento mediante un toque táctil. Puede ser irregular.

pointerdown

pointermove

Exclusivo para puntero de mouse. Se activa solo mediante toque táctil.

pointerup

Irregular para eventos táctiles.

pointercancel

Con evento táctil funciona solo al deslizar encima del área interactiva; pero no funciona al tocar el elemento. Con evento de puntero de mouse no activa evento.

Por otro lado, al combinarse con otros eventos se ejecuta pointercancel junto con los demás.

pointerout

Con evento táctil funciona al soltar el toque encima del elemento interactivo. Con puntero de mouse funciona al ingresar y luego alejar el puntero del elemento.

pointerleave

Similar al evento mouseleave de API mouseEvent.

gotpointercapture

Evento de captura de puntero móvil.