-
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 (#3383)
* translation(CSS): web/css/pointer-events/ * Apply suggestions from code review Co-authored-by: Vitalii Perehonchuk <[email protected]> * Apply suggestions from code review Co-authored-by: Vitalii Perehonchuk <[email protected]> --------- Co-authored-by: Vitalii Perehonchuk <[email protected]>
- Loading branch information
1 parent
dc9867d
commit 68d295f
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")}} – контролює, чи може користувач виділяти текст |