W3docs
ru
Войти

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

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

Свойство pointer-events управляет тем, может ли элемент быть целью событий указателя — кликов мышью, наведения, касаний и ввода с пера. Когда оно установлено в none, элемент становится «прозрачным» для указателя: клики, наведения и другие взаимодействия проходят сквозь него к тому, что находится под ним.

На этой странице объясняются значения свойства, где оно реально работает в HTML против SVG, распространённые практические сценарии использования и подводные камни, о которых стоит знать.

Информация

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

Многие значения применяются только к элементам SVG. Для обычных HTML-элементов широко поддерживаются только auto и none — специфичные для SVG значения (fill, stroke, visiblePainted и т. д.) не имеют эффекта на HTML.

Когда стоит использовать

  • Прозрачные наложения. Декоративный или загрузочный оверлей перекрывает страницу, но вы хотите, чтобы клики достигали контента под ним. Установите pointer-events: none для оверлея.
  • Визуальное отключение элемента управления. Комбинируйте pointer-events: none с уменьшенным значением opacity, чтобы кнопка или ссылка выглядела и вела себя как отключённая (у ссылок нет нативного атрибута disabled, поэтому это распространённый приём).
  • Пропуск событий сквозь конкретные SVG-фигуры. Фигуру, нарисованную поверх других, можно сделать неинтерактивной, чтобы фигуры под ней оставались кликабельными.
  • Повторное включение дочернего элемента внутри отключённого родителя. Установите none на обёртку и auto на один дочерний элемент, чтобы только он был интерактивным.

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

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

Внимание

pointer-events: none блокирует только ввод с указателя. Это не удаляет элемент из порядка обхода Tab, поэтому пользователи клавиатуры всё равно могут достичь «отключённой» ссылки или кнопки с помощью клавиши Tab. Для настоящей доступности также удалите элемент из порядка обхода Tab (tabindex="-1") или используйте настоящий атрибут disabled для элементов форм.

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

Синтаксис

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

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

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

Пример кода CSS pointer-events

<!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>
Попробуйте сами »

Результат

CSS pointer-events none value

В приведённом выше примере наведите курсор на каждый блок. Первый <div> (pointer-events: none) не реагирует — его ссылка не кликабельна и при наведении не появляется обводка. Второй <div> (pointer-events: auto) ведёт себя нормально.

Распространённый приём: отключённая ссылка

Поскольку у якорей нет атрибута disabled, pointer-events: none — обычный способ сделать ссылку некликабельной. Сочетайте с opacity, чтобы состояние было видимым:

.btn-link.is-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}

Помните оговорку об доступности выше: ссылка по-прежнему достижима с клавиатуры, если вы также не установите tabindex="-1".

Пример с тегом <svg>

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

Пример CSS pointer-events none

<!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>
Попробуйте сами »

Значения

ЗначениеОписание
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Элемент может быть целью события указателя только тогда, когда указатель находится над внутренней областью или периметром элемента.

Связанные свойства

  • cursor — изменяет курсор мыши, отображаемый над элементом (используйте cursor: not-allowed, чтобы подчеркнуть отключённое состояние).
  • visibility — visibility: hidden также исключает элемент из взаимодействий с указателем, но при этом скрывает сам элемент.
  • opacity — часто используется вместе с pointer-events: none для отображения отключённого состояния.
  • user-select — управляет тем, можно ли выделять текст внутри элемента.

Практика

Практика
Что делает свойство 'pointer-events' в CSS?
Что делает свойство 'pointer-events' в CSS?
Was this page helpful?