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 | ||
|
mouse |
táctil |
| ||
|
touchstart |
✘ |
✔ |
--- | |
|
touchmove |
✘ |
✔ |
--- | |
|
touchend |
✘ |
✔ |
--- | |
|
touchend |
✘ |
✔ |
--- | |
|
touchcancel |
✘ |
✔ |
--- | |
|
DOM Mouse Event |
mouse |
táctil |
--- | |
|
click |
✔ |
✔ |
Admite toque táctil al tocar y soltar el toque. | |
|
contextmenu |
✘ |
✔ |
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 | |
|
mouse |
táctil |
--- | ||
|
dragstart |
✔ |
✘ |
| |
|
drag |
✔ |
✘ |
| |
|
dragenter |
✔ |
✘ |
| |
|
dragleave |
✔ |
✘ |
| |
|
dragover |
✔ |
✘ |
| |
|
dragend |
✔ |
✘ |
| |
|
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. | |
|
pointerout |
✘ |
✔ |
Con evento táctil funciona al soltar el toque encima del elemento interactivo. | |
|
pointerleave |
✘ |
✔ |
Similar al evento mouseleave de API mouseEvent. | |
|
gotpointercapture |
✔ |
✘ |
Evento de captura de puntero móvil. | |