Свойство CSS pointer-events

Свойство pointer-events определяет, реагирует ли элемент на события указателя.

INFO

Изначально определённое для SVG, свойство pointer-events теперь является стандартным свойством CSS.

Многие значения применимы к SVG элементам, но только auto и none широко поддерживаются для HTML элементов.

Важные замечания

Установка pointer-events: none для элемента предотвращает его использование в качестве цели для событий указателя, но не останавливает срабатывание обработчиков событий на этом элементе. Если дочерний элемент имеет включённый pointer-events, он всё ещё может быть выбран в качестве цели. Следовательно, события, направленные на дочерний элемент, будут всплывать через родительский и вызывать любые прикрепленные к нему обработчики.

Начальное значение	auto
Применяется к	Ко всем элементам.
Наследуется	Нет.
Анимация	Нет.
Версия	Scalable Vector Graphics (SVG) 1.1 (Second Edition).
Синтаксис DOM	`object.style.pointerEvents = "auto";`

Синтаксис

Синтаксис CSS pointer-events

css

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

Пример свойства pointer-events:

Пример кода 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 »

Результат

CSS pointer-events none value

В приведенном примере наведите курсор на элементы, чтобы увидеть, какой из них реагирует на pointer-events.

Этот пример показывает, как события указателя могут проходить сквозь элементы или перехватываться нижележащими элементами. Пересекающиеся пути демонстрируют это поведение: путь с классом .c имеет pointer-events: none, поэтому клики проходят сквозь него к фигурам под ним. Путь с классом .d использует pointer-events: all, чтобы гарантировать перехват событий даже при визуальном перекрытии других элементов:

Пример pointer-events с тегом `<svg>`:

Пример значения CSS pointer-events none

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 »

Значения

Значение	Описание
none	Элемент никогда не реагирует на события указателя.
auto	Элемент принимает события указателя, такие как клики, наведение и т. д. Это значение по умолчанию для данного свойства.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Значения только для SVG

Значение	Описание
visiblePainted	Элемент может быть целью события указателя только тогда, когда свойство visibility установлено в `visible`, курсор мыши находится над внутренней областью или границей элемента, а свойства fill или stroke имеют значение, отличное от `none`.
visibleFill	Элемент может быть целью события указателя только тогда, когда свойство visibility установлено в `visible` и курсор мыши находится над внутренней областью элемента.
visibleStroke	Элемент может быть целью события указателя только тогда, когда свойство visibility установлено в `visible` и курсор мыши находится над границей элемента.
visible	Элемент может быть целью события указателя только тогда, когда свойство visibility установлено в `visible` и курсор мыши находится либо над внутренней областью, либо над границей элемента.
painted	Элемент может быть целью события указателя только тогда, когда курсор мыши находится над внутренней областью или границей элемента, а свойства fill или stroke имеют значение, отличное от `none`.
fill	Элемент может быть целью события указателя только тогда, когда указатель находится над внутренней областью элемента.
stroke	Элемент может быть целью события указателя только тогда, когда указатель находится над границей элемента.
all	Элемент может быть целью события указателя только тогда, когда указатель находится над внутренней областью или границей элемента.

Практика

Что делает свойство 'pointer-events' в CSS?

Оно позволяет элементу реагировать на клики мыши.Оно регулирует яркость элемента.Оно определяет, реагирует ли элемент на события мыши.Оно обеспечивает 3D-преобразование элемента.Оно позволяет элементам позади целевого элемента перехватывать события.

Свойство CSS pointer-events ​

Важные замечания ​

Синтаксис ​

Пример свойства pointer-events: ​

Результат ​

Пример pointer-events с тегом <svg>: ​

Значения ​

Значения только для SVG ​

Практика ​