Activación de la pseudo-clase ": activo" en una pantalla táctil

Question

Actualmente estoy desarrollando una aplicación de JavaScript que se implementará en un kiosco con pantalla táctil que ejecute Chrome en modo kiosco.

Me di cuenta de que cuando uso un mouse para hacer clic en los botones de la interfaz, los estilos aplicados por la pseudoclase ": activa" son visibles cuando el mouse está presionado. Mi problema es que el mismo botón que se activa al tocar la pantalla no activa el estado activo.

¿Hay alguna manera de que un evento táctil se comporte de la misma manera que con un clic del mouse?

Answer 1

Suponiendo que CSS: la pseudo-clase activa no funciona, es probable que necesite utilizar eventos DOM.

¿Funcionan los eventos "mousedown" y "mouseup" con las pantallas táctiles? Suponiendo que lo hacen, usted podría intentar algo como esto:

addEventListener("mousedown", function (event) { 
    if (event.target.setAttribute) { 
     event.target.setAttribute("data-active", ""); 
    } 
}, true); 

addEventListener("mouseup", function (event) { 
    if (event.target.removeAttribute) { 
     event.target.removeAttribute("data-active"); 
    } 
}, true); 

Luego, dentro de su CSS, reemplace: activo con [datos activa], así:

div[data-active] { 
    /* blah blah */ 
} 

no creo que esto será trabaje de la misma manera ... puede que tenga que hacer algunos trucos para que los elementos secundarios funcionen correctamente, por ejemplo.