Propiedad CSS pointer-events

La propiedad pointer-events define si un elemento reacciona o no a los eventos del puntero.

INFO

Originalmente definida para SVG, pointer-events ahora es una propiedad CSS estándar.

Muchos valores son aplicables a elementos SVG, pero solo auto y none tienen compatibilidad amplia para elementos HTML.

Notas importantes

Establecer pointer-events: none en un elemento impide que sea el objetivo de los eventos del puntero, pero no evita que se ejecuten los detectores de eventos en ese elemento. Si un elemento hijo tiene pointer-events habilitado, aún puede ser el objetivo. En consecuencia, los eventos dirigidos al hijo se propagarán hacia arriba a través del padre y activarán cualquier detector adjunto a él.

Initial Value	auto
Applies to	All elements.
Inherited	No.
Animatable	No.
Version	Scalable Vector Graphics (SVG) 1.1 (Second Edition).
DOM Syntax	`object.style.pointerEvents = "auto";`

Sintaxis

Sintaxis de CSS pointer-events

css

pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | initial | inherit;

Ejemplo de la propiedad pointer-events:

Ejemplo de código CSS pointer-events

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        pointer-events: none;
      }
      div.example2 {
        pointer-events: auto;
      }
      div.example:hover,
      div.example2:hover {
        outline: 2px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>The Pointer-events Property</h2>
    <h3>Pointer-events: none</h3>
    <div class="example">
      Click here: <a href="https://www.w3docs.com/learn-javascript.html">JavaScript Tutorial</a>
    </div>
    <h3>Pointer-events: auto</h3>
    <div class="example2">
      Click here: <a href="https://www.w3docs.com/learn-css.html">CSS Tutorial</a>
    </div>
  </body>
</html>

Try it Yourself »

Resultado

CSS pointer-events none value

En el ejemplo dado, pasa el cursor sobre los elementos para ver cuál reacciona a los pointer-events.

Este ejemplo muestra cómo los eventos del puntero pueden pasar a través de elementos subyacentes o ser capturados por ellos. Las rutas superpuestas demuestran este comportamiento: la ruta con la clase .c tiene pointer-events: none, por lo que los clics pasan a través de ella hacia las formas de debajo. La ruta con la clase .d usa pointer-events: all para asegurarse de capturar eventos incluso cuando se superpone visualmente a otros elementos:

Ejemplo de pointer-events con la etiqueta `<svg>`:

Ejemplo de valor none de CSS pointer-events

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        fill: #ccc;
      }
      .b {
        fill: #8ebf42;
      }
      .c {
        fill: #1c87c9;
        pointer-events: none;
      }
      .d {
        stroke: #666;
        fill: none;
        pointer-events: all;
      }
      .box:hover {
        stroke: #000;
        stroke-width: 5;
      }
    </style>
  </head>
  <body>
    <h2>Pointer-events property example</h2>
    <svg width="300" height="300">
      <g transform="translate(20, 20)">
        <path class="a box" d="M 0 0 L 100 0 L 100 100 L 0 100 z" />
        <path class="b box" d="M 50 50 l 100 0 l 0 100 l -100 0 z" />
        <path class="c box" d="M 100 100 l 100 0 l 0 100 l -100 0 z" />
        <path class="d box" d="M 150 150 l 100 0 l 0 100 l -100 0 z" />
      </g>
    </svg>
  </body>
</html>

Try it Yourself »

Valores

Value	Description
none	El elemento nunca reacciona a los eventos del puntero.
auto	El elemento acepta eventos del puntero como clics, pasar el cursor, etc. Este es el valor predeterminado de esta propiedad.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Solo valores de SVG

Value	Description
visiblePainted	El elemento solo puede ser el objetivo de un evento del puntero cuando la propiedad visibility está establecida en `visible`, el cursor del mouse está sobre el interior o el perímetro del elemento, y la propiedad fill o stroke está establecida en un valor distinto de `none`.
visibleFill	El elemento solo puede ser el objetivo de un evento del puntero cuando la propiedad visibility está establecida en `visible` y el cursor del mouse está sobre el interior del elemento.
visibleStroke	El elemento solo puede ser el objetivo de un evento del puntero cuando la propiedad visibility está establecida en `visible` y el cursor del mouse está sobre el perímetro del elemento.
visible	El elemento solo puede ser el objetivo de un evento del puntero cuando la propiedad visibility está establecida en `visible` y el cursor del mouse está sobre el interior o el perímetro del elemento.
painted	El elemento solo puede ser el objetivo de un evento del puntero cuando el cursor del mouse está sobre el interior o el perímetro del elemento y la propiedad fill o stroke está establecida en un valor distinto de `none`.
fill	El elemento solo puede ser el objetivo de un evento del puntero cuando el puntero está sobre el interior del elemento.
stroke	El elemento solo puede ser el objetivo de un evento del puntero cuando el puntero está sobre el perímetro del elemento.
all	El elemento solo puede ser el objetivo de un evento del puntero cuando el puntero está sobre el interior o el perímetro del elemento.

Práctica

What does the 'pointer-events' property in CSS do?

It allows an element to react to mouse clicks.It adjusts the brightness of an element.It defines whether or not an element reacts to mouse events.It provides 3D transformation to an element.It allows elements behind the target element to catch events.

Propiedad CSS pointer-events ​

Notas importantes ​

Sintaxis ​

Ejemplo de la propiedad pointer-events: ​

Resultado ​

Ejemplo de pointer-events con la etiqueta <svg>: ​

Valores ​

Solo valores de SVG ​

Práctica ​