From fd5171baed8c291d158342ac0104fa23dec48bbb Mon Sep 17 00:00:00 2001 From: astropsy999 Date: Tue, 22 Oct 2024 17:27:00 +0300 Subject: [PATCH] translation(CSS): web/css/pointer-events/ --- files/uk/web/css/pointer-events/index.md | 144 +++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/uk/web/css/pointer-events/index.md diff --git a/files/uk/web/css/pointer-events/index.md b/files/uk/web/css/pointer-events/index.md new file mode 100644 index 000000000..c55929ee3 --- /dev/null +++ b/files/uk/web/css/pointer-events/index.md @@ -0,0 +1,144 @@ +--- +title: pointer-events +slug: Web/CSS/pointer-events +page-type: css-property +browser-compat: css.properties.pointer-events +--- + +{{CSSRef}} + +Властивість [CSS](/uk/docs/Web/CSS) **`pointer-events`** задає, за яких обставин певний графічний елемент може стати [ціллю](/uk/docs/Web/API/Event/target) подій вказівника. + +{{EmbedInteractiveExample("pages/css/pointer-events.html")}} + +## Синтаксис + +```css +/* Значення – ключове слово */ +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` + + - : Елемент сам по собі ніколи не є [ціллю](/uk/docs/Web/API/Event/target) подій вказівника. Однак, якщо встановлено інше значення `pointer-events`, його вкладені елементи можуть бути доступні до взаємодії. У такому випадку події вказівника будуть викликати обробники на батьківському елементі під час захоплення або [спливання](/uk/docs/Web/API/Event/bubbles), коли подія проходить через нащадків. + + > [!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. Елемент може бути ціллю події вказівника лише коли вказівник знаходиться над [обмежувальним блоком](/uk/docs/Glossary/Bounding_box) елемента. +- `all` + - : Тільки для SVG (експериментально для HTML). Елемент може бути ціллю події вказівника лише коли вказівник знаходиться над внутрішньою частиною ("fill") або контуром ("stroke") елемента. Значення `fill`, `stroke` та `visibility` не впливають на обробку подій. + +## Опис + +Коли властивість не вказана, для вмісту SVG застосовуються ті ж характеристики, що й для значення `visiblePainted`. + +Значення `none` не тільки робить елемент недоступним для подій вказівника, але й дозволяє події "проходити крізь" цей елемент, націлюючись на те, що розташоване під ним. + +Зверніть увагу, що відключення можливості елемента бути ціллю подій вказівника за допомогою `pointer-events`, _не_ обов'язково означає, що обробники подій вказівника на цьому елементі _не можуть_ або _не будуть_ викликані. Якщо один з нащадків елемента має значення `pointer-events`, яке дозволяє йому бути ціллю подій вказівника, тоді події, спрямовані на цього нащадка, пройдуть крізь батьківський елемент під час руху по ланцюгу, і викличуть обробники подій на батьківському елементі. Звісно, будь-яка активність вказівника в зоні, яку покриває батьківський елемент, але не нащадок, не буде зафіксована ні нащадком, ні батьківським елементом. Подія просто "пройде крізь" батьківський елемент і націлиться на те, що знаходиться під ним. + +Елементи з `pointer-events: none` все ще отримуватимуть фокус через послідовну навігацію клавіатурою за допомогою клавіші Tab. + +## Формальне визначення + +{{cssinfo}} + +## Формальний синтаксис + +{{csssyntax}} + +## Приклади + +### Вимкнення подій вказівника для всіх зображень + +Цей приклад вимикає події вказівника (натискання, перетягування, наведення тощо) для всіх зображень. + +```css +img { + pointer-events: none; +} +``` + +### Вимкнення подій вказівника для одного посилання + +Цей приклад вимикає події вказівника для посилання на `http://example.com`. + +#### HTML + +```html + +``` + +#### CSS + +```css +a[href="http://example.com"] +{ + pointer-events: none; +} +``` + +#### Результат + +{{EmbedLiveSample("Vymknennia-podii-vkazivnyka-dlia-odnoho-posylannia", "500", "100")}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- Атрибут SVG {{SVGAttr("pointer-events")}} +- Атрибут SVG {{SVGAttr("visibility")}} +- API {{domxref("PointerEvent")}} +- [Специфікації WebKit PointerEventsProperty](https://webkit.org/specs/PointerEventsProperty.html), розширені для використання у вмісті (X)HTML +- {{cssxref("user-select")}} – контролює, чи може користувач виділяти текст