pointer-events

Властивість CSS pointer-events (події вказівника) задає, за яких обставин (і чи такі обставини є) певний графічний елемент може стати ціллю подій вказівника.

Спробуйте його в дії

Синтаксис

/* Значення – ключове слово */
pointer-events: auto;
pointer-events: none;

/* Значення SVG */
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: bounding-box;
pointer-events: all;

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

Властивість pointer-events задається як одне ключове слово, вибране зі списку значень нижче.

Значення

auto

Елемент поводиться так, ніби властивість pointer-events не була задана. У вмісті SVG це значення та значення visiblePainted мають однаковий ефект.

none

Елемент сам собою ніколи не є ціллю подій вказівника. Однак його піддерево може піддаватися взаємодії, якщо задати в ньому інше значення pointer-events. За таких умов події вказівника будуть запускати обробники на батьківському елементі під час фаз захоплення та спливання, коли подія підніматиметься від нащадків.

[!NOTE] Події pointerenter та pointerleave викликаються, коли вказівник переміщується до елемента або його нащадків. Навіть якщо на батьківському елементі задано pointer-events: none, а на нащадках — ні, події все одно будуть викликані на батьківському елементі, коли вказівник входить або виходить за межі нащадка.

Тільки для SVG (експериментальне для HTML)

visiblePainted

Тільки для SVG (експериментальне для HTML). Елемент може бути ціллю події вказівника лише тоді, коли властивість visibility задана значенням visible, і, наприклад, коли курсор миші знаходиться над внутрішньою частиною ("fill") елемента, а властивість fill має значення, відмінне від none, або коли курсор миші знаходиться над контуром ("stroke") елемента, і властивість stroke встановлена на значення, відмінне від none.

visibleFill

Тільки для SVG. Елемент може бути ціллю події вказівника лише тоді, коли visibility має значення visible, і, наприклад, коли курсор миші знаходиться над внутрішньою частиною ("fill") елемента. Значення fill не впливає на обробку подій.

visibleStroke

Тільки для SVG. Елемент може бути ціллю події вказівника лише тоді, коли visibility має значення visible, і, наприклад, коли курсор миші знаходиться над контуром ("stroke") елемента. Значення stroke не впливає на обробку подій.

visible

Тільки для SVG (експериментальне для HTML). Елемент може бути ціллю події вказівника, коли visibility має значення visible, і, наприклад, коли курсор миші знаходиться над внутрішньою частиною ("fill") або контуром ("stroke") елемента. Значення fill та stroke не впливають на обробку подій.

painted

Тільки для SVG (експериментальне для HTML). Елемент може бути ціллю події вказівника лише тоді, коли, наприклад, курсор миші знаходиться над внутрішньою частиною ("fill") елемента, і властивість fill має значення, відмінне від none, або коли курсор миші знаходиться над контуром ("stroke") елемента, і властивість stroke має значення, відмінне від none. Значення visibility не впливає на обробку подій.

fill

Тільки для SVG. Елемент може бути ціллю події вказівника лише тоді, коли вказівник перебуває над внутрішньою частиною ("fill") елемента. Значення fill та visibility не впливають на обробку подій.

stroke

Тільки для SVG. Елемент може бути ціллю події вказівника лише тоді, коли вказівник знаходиться над контуром ("stroke") елемента. Значення stroke та visibility не впливають на обробку подій.

bounding-box

Тільки для SVG. Елемент може бути ціллю події вказівника лише тоді, коли вказівник знаходиться над рамками меж елемента.

all

Тільки для SVG (експериментальне для HTML). Елемент може бути ціллю події вказівника лише тоді, коли вказівник перебуває над внутрішньою частиною ("fill") або контуром ("stroke") елемента. Значення fill, stroke та visibility не впливають на обробку подій.

Опис

Коли властивість не задана, для вмісту SVG застосовуються ті ж характеристики, що й для значення visiblePainted.

Значення none не тільки робить елемент недоступним для подій вказівника, але й дозволяє події "проходити крізь" цей елемент, націлюючись на те, що розташоване під ним.

Зверніть увагу, що відключення можливості елемента бути ціллю подій вказівника за допомогою pointer-events не обов'язково означає, що обробники подій вказівника на цьому елементі не можуть або не будуть викликані. Якщо один з нащадків елемента має значення pointer-events, яке дозволяє йому бути ціллю подій вказівника, тоді події, спрямовані на цього нащадка, пройдуть крізь батьківський елемент під час руху по ланцюгу, і викличуть обробники подій на батьківському елементі. Звісно, будь-яка активність вказівника в зоні, яку покриває батьківський елемент, але не нащадок, не буде зафіксована ні нащадком, ні батьківським елементом. Подія просто "пройде крізь" батьківський елемент і націлиться на те, що знаходиться під ним.

Елементи з pointer-events: none все одно отримують фокус за допомогою послідовної навігації клавіатурою за допомогою клавіші Tab.

Формальне визначення

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

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

Приклади

Вимкнення подій вказівника для всіх зображень

Цей приклад вимикає події вказівника (натискання, перетягування, наведення тощо) для всіх зображень.

img {
  pointer-events: none;
}

Вимкнення подій вказівника для одного посилання

Цей приклад вимикає події вказівника для посилання на http://example.com.

HTML

<ul>
  <li><a href="https://webdoky.org/">ВебДоки</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>

CSS

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

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• Атрибут SVG pointer-events
• Атрибут SVG visibility
• API PointerEvent
• Специфікації WebKit PointerEventsProperty, розширені для використання у вмісті (X)HTML
• user-select – контролює, чи може користувач виділяти текст