F101Botones que actúan nada más pulsar, sin esperar a soltar

Aplicabilidad

Todas las tecnologías que incluyen controles interactivos que pueden activarse mediante un puntero.

Descripción

El objetivo de este fallo es describir las situaciones en las que:

1. los controles están configurados para activar una función en el evento de pulsación (down-event) de un puntero;
2. no se dispone de ningún mecanismo adicional para abortar o deshacer;
3. el evento de liberación (up-event) no revierte el resultado de la activación;
4. no es esencial que la función se ejecute y complete en el evento de pulsación.

En lugar de aprovechar el evento click, los autores pueden usar eventos de pulsación como mousedown, touchstart o pointerdown. Como consecuencia, la función se ejecutará en cuanto se pulse un botón del ratón (aunque aún no se haya soltado), o en cuanto un dedo o un lápiz óptico entren en contacto con la pantalla táctil.

Es posible usar el evento de pulsación y mitigar los posibles problemas para evitar fallar el criterio de conformidad. Por ejemplo, ofrecer un método para deshacer o abortar la función con facilidad, o revertir el resultado en el evento de liberación (cuando se suelta el botón del ratón, o cuando el dedo o el lápiz óptico se levantan de la pantalla táctil). Y téngase en cuenta que algunos usos del evento de pulsación son esenciales para la función (por ejemplo, cuando el control simula el funcionamiento de un instrumento musical, como un conjunto de teclas de piano, o cuando el control se usa como control en pantalla de un juego que requiere una respuesta rápida e inmediata), en cuyo caso no fallarían este criterio de conformidad.

El procedimiento de prueba que se describe a continuación podría complementarse con pruebas automáticas o semiautomáticas que busquen código JavaScript que registre escuchadores de eventos como mousedown, touchstart o pointerdown. La prueba automática no sería suficiente para determinar si el contenido cumple o falla, pero puede ayudar a reducir el número de controles potencialmente problemáticos.

Ejemplos

<!-- modal dialog with a form -->
...
<button id="close" type="button">Close</button>
...

const trigger = document.getElementById("close");
function closeDialog() {
  /* close the modal dialog */
  ...
}
trigger.addEventListener('mousedown', closeDialog);
trigger.addEventListener('touchstart', closeDialog);
trigger.addEventListener('pointerdown', closeDialog);

Pruebas