CSS: pointer-events

[forTips] CSS

Descubriremos como la propiedad pointer-events puede ayudarnos a mantener a los usuarios a raya, y no toquen lo que no deben. Siempre y cuando no sepan de CSS :P

Compatibilidad

Primero demos un repaso a la compatibilidad de esta propiedad con los navegadores actuales. Tal y como podéis consultar aquí.

pointer-events

pointer-events

Como siempre, tenemos a Internet Explorer molestando, así que si debemos mantener compatibilidad con versiones antiguas de este, ya nos podemos ir olvidando de usar pointer-events. Pero el resto de navegadores más usados hoy en día lo soportan correctamente.

Uso y Ejemplo

A veces por requisitos de la aplicación necesitamos que en cierto momento una zona que contiene controles se deshabilite por completo. Algunas veces estas zonas, capas,… tienen infinidad de controles, son dinámicas o simplemente no sabemos que pueden llegar a contener.

Bien, aquí entran en juego la propiedad CSS pointer-events.

Imaginemos que tenemos algo del estilo, donde dentro cargamos N controles que no sabemos de que tipo son, ni si son específicos de un framework, o simplemente somos perezosos y queremos hacer el trabajdo rápido y no tener que mantener esa funcionalidad nunca más.


<div id="myControlsContainer">

<!-- Aquí tendriamos los controles cargados en cualquier momento -->

</div>

Hasta ahora todo correcto, y es aquí donde viene la magia. En nuestra aplicación sabemos que dada X condición ese <div> debe estar completamente deshabilitado, con lo cual colocando un script de JQuery como el siguiente, en el lugar idóneo lograríamos nuestra tarea.


var deshabilitarControles = true; //Variable meramente instructiva

$("#myControlsContainer").css('pointer-events', deshabilitarControles ? 'none' : 'auto');

Como veis, a nivel de javascript podríamos realizarlo de forma fácil, pero evidentemente también podemos aplicarlo a nuestra hoja de estilos CSS en todo tipo de selectores. Además esta propiedad dispone de otros valores aunque por ahora no son muy útiles a mi parecer.

Moraleja

A veces un informático perezoso se las ingenia mejor para no tener que modificar ciertas partes de código susceptibles a cambios muy fácilmente.