Ejemplo de eventos de puntero CSS

los pointer-eventsCSS conjuntos de propiedades bajo qué circunstancias (si las hay) un elemento gráfico en particular puede convertirse en el objetivo de eventos de puntero.

Sintaxis

/* Keyword values */pointer-events: auto;pointer-events: none;pointer-events: visiblePainted;/* SVG only */pointer-events: visibleFill;/* SVG only */pointer-events: visibleStroke;/* SVG only */pointer-events: visible;/* SVG only */pointer-events: painted;/* SVG only */pointer-events: fill;/* SVG only */pointer-events: stroke;/* SVG only */pointer-events: all;/* SVG only *//* Global values */pointer-events: inherit;pointer-events: initial;pointer-events: unset;

los pointer-events La propiedad se especifica como una sola palabra clave elegida de la lista de valores a continuación.

Valores

auto

El elemento se comporta como lo haría si el pointer-events la propiedad no se especificaron. En contenido SVG, este valor y el valor visiblePainted tienen el mismo efecto.

none

El elemento nunca es el objetivo de eventos punteros; sin embargo, los eventos de puntero pueden apuntar a sus elementos descendientes si esos descendientes tienen pointer-events establecido en algún otro valor. En estas circunstancias, los eventos de puntero activarán detectores de eventos en este elemento principal según corresponda en su camino hacia / desde el descendiente durante la captura del evento /burbuja etapas.

Solo SVG (experimental para HTML)

visiblePainted

Solo SVG (experimental para HTML). El elemento solo puede ser el destino de un evento de puntero cuando el visibility la propiedad está establecida en visible y, por ejemplo, cuando el cursor del mouse está sobre el interior (es decir, ‘relleno’) del elemento y el fill la propiedad se establece en un valor distinto de none, o cuando el cursor del mouse está sobre el perímetro (es decir, ‘trazo’) del elemento y el stroke la propiedad se establece en un valor distinto de none.

visibleFill

SVG solamente. El elemento solo puede ser el destino de un evento de puntero cuando el visibility la propiedad está establecida en visible y cuando, por ejemplo, el cursor del mouse está sobre el interior (es decir, relleno) del elemento. El valor de la fill La propiedad no afecta el procesamiento de eventos.

visibleStroke

SVG solamente. El elemento solo puede ser el destino de un evento de puntero cuando el visibility la propiedad está establecida en visible y, por ejemplo, cuando el cursor del mouse está sobre el perímetro (es decir, el trazo) del elemento. El valor de la stroke La propiedad no afecta el procesamiento de eventos.

visible

Solo SVG (experimental para HTML). El elemento puede ser el objetivo de un evento de puntero cuando el visibility la propiedad está establecida en visible y, por ejemplo, el cursor del ratón está sobre el interior (es decir, relleno) o el perímetro (es decir, trazo) del elemento. Los valores de la fill y stroke no afectan el procesamiento de eventos.

painted

Solo SVG (experimental para HTML). El elemento solo puede ser el objetivo de un evento de puntero cuando, por ejemplo, el cursor del mouse está sobre el interior (es decir, ‘relleno’) del elemento y el fill la propiedad se establece en un valor distinto de none, o cuando el cursor del mouse está sobre el perímetro (es decir, ‘trazo’) del elemento y el stroke la propiedad se establece en un valor distinto de none. El valor de la visibility La propiedad no afecta el procesamiento de eventos.

fill

SVG solamente. El elemento solo puede ser el objetivo de un evento de puntero cuando el puntero está sobre el interior (es decir, relleno) del elemento. Los valores de la fill y visibility las propiedades no afectan el procesamiento de eventos.

stroke

SVG solamente. El elemento solo puede ser el objetivo de un evento de puntero cuando el puntero está sobre el perímetro (es decir, el trazo) del elemento. Los valores de la stroke y visibility las propiedades no afectan el procesamiento de eventos.

all

Solo SVG (experimental para HTML). El elemento solo puede ser el objetivo de un evento de puntero cuando el puntero está sobre el interior (es decir, relleno) o el perímetro (es decir, trazo) del elemento. Los valores de la fill, stroke, y visibility las propiedades no afectan el procesamiento de eventos.

Descripción

Cuando esta propiedad no está especificada, las mismas características del visiblePainted El valor se aplica al contenido SVG.

Además de indicar que el elemento no es el objetivo de los eventos de puntero, el valor none indica al evento de puntero que pase “a través” del elemento y apunte a lo que esté “debajo” de ese elemento.

Tenga en cuenta que evitar que un elemento sea el destino de eventos de puntero mediante el uso de pointer-events lo hace no necesariamente significa que los oyentes de eventos de puntero en ese elemento no poder o no ser activado. Si uno de los hijos del elemento tiene pointer-events establecido explícitamente en permitir que el hijo sea el objetivo de los eventos de puntero, entonces cualquier evento que tenga como objetivo ese hijo pasará por el padre a medida que el evento viaja a lo largo de la cadena del padre y activará los detectores de eventos en el padre según corresponda. Por supuesto, cualquier actividad de puntero en un punto de la pantalla que esté cubierto por el padre pero no por el hijo no será captada ni por el hijo ni por el padre (pasará “a través” del padre y apuntará a lo que esté debajo).

Elementos con pointer-events: none seguirá recibiendo el enfoque a través de la navegación secuencial del teclado utilizando el Pestaña key.

Nos gustaría proporcionar un control más detallado (que solo auto y none) en HTML para qué partes de un elemento harán que “capture” eventos de puntero y cuándo. Para ayudarnos a decidir cómo pointer-events debe extenderse aún más para HTML, si tiene alguna cosa en particular que le gustaría poder hacer con esta propiedad, agréguela a la sección Casos de uso de esta página wiki (no se preocupe por mantenerlo ordenado).

Definicion formal

Sintaxis formal

auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

Ejemplos de

Deshabilitar eventos de puntero en todas las imágenes

Este ejemplo deshabilita los eventos de puntero (hacer clic, arrastrar, desplazarse, etc.) en todas las imágenes.

imgpointer-events: none;

Deshabilitar eventos de puntero en un solo enlace

Este ejemplo deshabilita los eventos de puntero en el enlace a http://example.com.

HTML

<ul><li><ahref="https://developer.mozilla.org">MDNa>li><li><ahref="http://example.com">example.coma>li>ul>

CSS

a[href="http://example.com"]pointer-events: none;

Resultado

Especificaciones

Su extensión a elementos HTML, aunque está presente en los primeros borradores del módulo de interfaz de usuario básico de CSS Nivel 3, se ha trasladado a su nivel 4.

Compatibilidad del navegador

Ver también

• El SVG attribute pointer-events
• El SVG attribute visibility
• Puntero de especificaciones de WebKitEventsProperty extendido para su uso en contenido HTML (X)
• user-select – controla si el usuario puede seleccionar texto