este pointer-events La propiedad controla si el elemento puede ser el destino de eventos de métricas como clics, estados de desplazamiento y otros eventos basados en métricas. En otras palabras, le permite decidir si el navegador debe tratar un elemento como interactivo cuando el indicador se sitúa sobre él.
.no-pointer-events {
pointer-events: none;
}Para comprender cómo funciona esta propiedad, es útil comprender qué hace el navegador antes de activar el evento de métrica. Primero, debe determinar qué elemento está debajo del puntero. Este proceso se llama prueba de acierto.
Normalmente, los navegadores seleccionan el elemento superior debajo del indicador. Pero si el elemento tiene pointer-events empezar a noneel navegador lo omitirá y continuará buscando el siguiente elemento elegible a continuación.
una vez que lo piensas pointer-events De esa manera, gran parte de su comportamiento empieza a tener sentido. En lugar de deshabilitar el evento, simplemente cambia qué elemento (o, en el caso de SVG, qué parte del elemento) se convierte primero en el objetivo del evento.
sintaxis
pointer-events: auto | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none;- Original: auto
- Se aplica a: Todos los elementos. En SVG, funciona con elementos contenedores, elementos gráficos y elementos.
- Genética: Sí
- Valor calculado: Especificar palabras clave
- Tipo de animación: discreto
valores
pointer-events: auto;
pointer-events: none;
/* SVG values */
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: bounding-box;
pointer-events: all;
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;Además de los valores globales CSS estándar que se muestran arriba, pointer-events Defina once valores de palabras clave. usarías auto y none Contiene elementos HTML y SVG, mientras que los otros nueve elementos contienen solo SVG y brindan un control más preciso sobre qué partes del gráfico pueden recibir eventos del indicador.
auto:Valor predeterminado. El elemento se comporta normalmente y puede recibir eventos indicadores. En SVG, esto se comporta igual quevisiblePainted.none:El elemento en sí no puede ser el objetivo de los eventos del indicador, lo que significa que no se puede hacer clic en él ni pasar el cursor sobre él. En cambio, el navegador apunta a todo lo que hay debajo.
Solo valores SVG
visiblePainted:El elemento sólo recibe eventos de indicador cuando está visible (visibility: visible) y el indicador está encima de la parte trazada del gráfico. En otras palabras, está ubicado en un área llena (fillNonone) o borde trazo (strokeNonone).visibleFill:El elemento solo recibe eventos del indicador cuando es visible y el indicador está por encima de su relleno, independientemente de su valor.fillpropiedad, lo que significa que incluso se puede configurar ennone.visibleStroke:El elemento solo recibe eventos de indicador cuando es visible y el indicador está por encima de su trazo, independientemente de su valor.strokepropiedad.- visible:El elemento solo recibe eventos de indicador cuando es visible y el indicador está por encima de su relleno o trazo, independientemente de su valor.
fillystrokecaracterística. painted: El elemento solo recibe eventos de indicador cuando el indicador está en la parte dibujada del gráfico (su relleno o trazo), independientemente devisibilitypropiedad.fill:El elemento sólo recibe eventos de indicador cuando el indicador excede su rango de llenado, independientemente defillovisibilitycaracterística.stroke: El elemento solo recibe eventos del indicador cuando el indicador está por encima de su carrera, independientemente destrokeovisibilitycaracterística.bounding-box: Un elemento recibe eventos indicadores en cualquier lugar dentro de su cuadro delimitador (el rectángulo más pequeño que lo rodea por completo), independientemente de su forma, incluso si algunas partes de esa área no están dibujadas.all: Un elemento recibe eventos de indicador cuando el indicador está por encima de su relleno o trazo, independientemente defill,strokeovisibilitycaracterística.
Los niños pueden optar por volver a unirse.
Una cosa que fácilmente se pasa por alto es que pointer-events Es una propiedad heredada. ambiente pointer-events llegar none Estar en el padre significa que sus hijos también heredan el valor. Sin embargo, cualquier niño puede anular los valores heredados configurando pointer-events regresar a auto (u otro valor válido).
.parent {
pointer-events: none;
}
.child {
pointer-events: auto;
}En este ejemplo, el padre ignora los eventos de métricas, pero el hijo aún puede ser su objetivo.
Un caso de uso común son los modales. Puede centrar el modal usando un contenedor de página completa, pero el contenedor también cubre toda la ventana gráfica. sin cambiar su pointer-events valor, lo que evita que los eventos del indicador alcancen los elementos debajo de él. ambiente pointer-events llegar none Se solucionó esto en el contenedor, pero dado que la propiedad se hereda, también necesitará restaurar el esquema usando pointer-events empezar a auto.
En la siguiente demostración, cuando pointer-events Las propiedades se especifican como none Puedes interactuar con los botones de fondo incluso si están detrás de una superposición.
La propagación de eventos todavía funciona.
este pointer-events Las propiedades solo determinan qué elemento se convierte en el objetivo del evento. No cambia la forma en que el evento pasa posteriormente por el DOM.
Por ejemplo, si un niño tiene pointer-events: auto Haga clic en el elemento principal pointer-events: noneel niño todavía se vuelve event.target. A partir de ahí, el evento sigue las fases normales de captura y difusión, por lo que los detectores de eventos adjuntos al padre siguen ejecutándose.
en otras palabras, pointer-events Afecta la selección de objetivos sin afectar la propagación de eventos.
En la demostración a continuación puede ver cómo el padre pointer-events: none todavía disponible click, pointerentery pointerleave Cuando hace clic o mueve el indicador dentro o fuera de sus elementos secundarios interactivos.
Los eventos de métricas no desactivan elementos
este pointer-events El atributo solo evita que el elemento sea el objetivo de eventos del indicador. Por lo tanto, el elemento aún puede recibir el foco del teclado usando la tecla Tab y, si el elemento es enfocable, el usuario puede continuar interactuando con él usando el teclado.
Si necesita desactivar los controles de formulario nativos, utilice disabled propiedades en su lugar. Si su objetivo es hacer que una sección completa de la página sea completamente no interactiva (incluida la entrada de indicadores, el enfoque del teclado y el árbol de accesibilidad), entonces inert Las propiedades son una mejor opción.
Los eventos del indicador no impiden la selección de texto
configuración pointer-events propiedad a none No impide que los usuarios seleccionen texto. Por ejemplo, el usuario aún puede seleccionar texto presionando Ctrl/Cmd + A en el teclado.
Esto se debe a que la selección de texto no depende de si el elemento puede ser el objetivo de un evento indicador.
Si su objetivo es evitar la selección de texto, utilice user-select Propiedad en lugar.
.avoid-user-selection {
user-select: none;
}Intente seleccionar texto en cada bloque a continuación:
demostración
Al crear un menú de navegación, un patrón común es ocultar el submenú configurando su submenú opacity llegar 0 Luego, hazlo visible cuando el usuario pasa el cursor sobre el elemento del menú principal. El problema es que el submenú todavía existe, por lo que incluso si no puedes verlo, aún puede recibir eventos del indicador.
A continuación, puede ver dos menús idénticos. Uno solo usa opacidad para ocultar su submenú, mientras que el otro también usa pointer-events. Pase el cursor sobre el área del submenú oculto e intente interactuar con el contenido detrás de él para ver cómo funciona. pointer-events Evite que elementos invisibles se interpongan en su camino.
Además, para tener una mejor idea de cómo funciona cada valor SVG de esta propiedad, seleccione un valor de la lista desplegable y luego mueva el puntero alrededor del anillo: sobre su banda rellena, dentro de su centro hueco y sobre las esquinas vacías del cuadro delimitador discontinuo. Observe cómo el área de interacción cambia con cada valor.
