-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
translation(CSS): web/css/pointer-events/
- Loading branch information
1 parent
69af6ba
commit fd5171b
Showing
1 changed file
with
144 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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` все ще отримуватимуть фокус через послідовну навігацію клавіатурою за допомогою клавіші <kbd>Tab</kbd>. | ||
|
|
||
| ## Формальне визначення | ||
|
|
||
| {{cssinfo}} | ||
|
|
||
| ## Формальний синтаксис | ||
|
|
||
| {{csssyntax}} | ||
|
|
||
| ## Приклади | ||
|
|
||
| ### Вимкнення подій вказівника для всіх зображень | ||
|
|
||
| Цей приклад вимикає події вказівника (натискання, перетягування, наведення тощо) для всіх зображень. | ||
|
|
||
| ```css | ||
| img { | ||
| pointer-events: none; | ||
| } | ||
| ``` | ||
|
|
||
| ### Вимкнення подій вказівника для одного посилання | ||
|
|
||
| Цей приклад вимикає події вказівника для посилання на `http://example.com`. | ||
|
|
||
| #### HTML | ||
|
|
||
| ```html | ||
| <ul> | ||
| <li><a href="https://webdoky.org/">ВебДоки</a></li> | ||
| <li><a href="http://example.com">example.com</a></li> | ||
| </ul> | ||
| ``` | ||
|
|
||
| #### 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")}} – контролює, чи може користувач виділяти текст |