pointer-events

Синтаксис

/* Ключевые слова */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* только для SVG */
pointer-events: visibleFill; /* только для SVG */
pointer-events: visibleStroke; /* только для SVG */
pointer-events: visible; /* только для SVG */
pointer-events: painted; /* только для SVG */
pointer-events: fill; /* только для SVG */
pointer-events: stroke; /* только для SVG */
pointer-events: all; /* только для SVG */

/* Глобальные значения */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

Значения

auto

Элемент ведёт себя так же, как и если бы свойство pointer-events не было задано. В SVG это значение даёт такой же эффект, как и значение visiblePainted.

none

Элемент не может быть целью (target) событий мыши; тем не менее, целью событий мыши могут быть его потомки, если их pointer-events имеет какое-либо другое значение. В этом случае события мыши вызовут ожидаемое срабатывание обработчиков на этом родительском элементе на пути к/от потомк(у)/(а) во время фазы захвата/всплытия.

visiblePainted

Только SVG. Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство fill установлено в значение отличное от none, или над периметром элемента ('stroke'), при этом свойство stroke установлено в значение отличное от none.

visibleFill

Только SVG. Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойства fill не влияет на обработку события.

visibleStroke

Только SVG. Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над периметром элемента ('stroke'). Значение свойства stroke не влияет на обработку события.

visible

Только SVG. Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств fill и stroke не влияют на обработку события.

painted

Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство fill установлено в значение отличное от none, или над периметром элемента ('stroke'), при этом свойство stroke установлено в значение отличное от none. Значение свойства visibility не влияет на обработку события.

fill

Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойств visibility и fill не влияют на обработку события.

stroke

Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над периметром элемента ('stroke'). Значение свойств visibility и stroke не влияют на обработку события.

all

Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств visibility, fill и stroke не влияют на обработку события.

Формальный синтаксис

pointer-events = 
  auto            |
  bounding-box    |
  visiblePainted  |
  visibleFill     |
  visibleStroke   |
  visible         |
  painted         |
  fill            |
  stroke          |
  all             |
  none            

Примеры

Пример 1

/* Пример 1: Сделать так, что бы все объекты img не реагировали на перетаскивание, наведение(:hover), нажатие(click) и т.д. */
img {
  pointer-events: none;
}

Пример 2

Сделать ссылку на ресурс http://example.com не реагирующей на нажатие(click), наведение(:hover) и т.д.

<ul>
  <li><a href="https://big.rakal.top">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>

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

Примечание

Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши, с помощью pointer-events не обязательно означает, что обработчики событий мыши на этом элементе не могут или не будут запускаться. Если у одного из дочерних элементов есть явные pointer-events, позволяющие этому ребёнку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает обработчики событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребёнком, ни родителем (он пройдёт через «родительский» на «цели» под ним).

Мы хотели бы предоставить более тонкий контроль (а не только auto и none) в HTML, когда части элемента смогут «поймать» события мыши. Если у вас есть какие-то конкретные вещи, чтобы помочь нам в решении как следует расширить pointer-events для HTML, и которые вы хотели бы сделать с этим свойством, добавьте их в раздел «Использовать случаи» на этой странице вики (не беспокойтесь, мы всё сохраним аккуратно).

Характеристики

Совместимость с браузерами

Смотрите также

• Атрибут SVG pointer-events
• Атрибут SVG visibility
• WebKit Specs PointerEventsProperty extended for use in (X)HTML content
• 60fps scrolling using pointer-events: none