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 | ||
|
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. | |
|
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 | |
|
mouse |
táctil |
--- | ||
|
dragstart |
✔ |
✘ |
| |
|
drag |
✔ |
✘ |
| |
|
dragenter |
✔ |
✘ |
| |
|
dragleave |
✔ |
✘ |
| |
|
dragover |
✔ |
✘ |
| |
|
dragend |
✔ |
✘ |
| |
|
✔ |
✔ |
--- | ||
|
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. 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. | |