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 J. Romero Andrade
| 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.

Evaluado en navegadores:

  • Opera 101.0 macOS (Escritorio y móvil)

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

mouse

táctil

---

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.