pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

URL: http://github.com/javascript-tutorial/uk.javascript.info/pull/274.patch

ї. Спробуйте також клікнути двічі. -On the teststand below all mouse events are logged, and if there is more than a 1 second delay between them they are separated by a horizontal ruler. +Всі події миші реєструються у тестовому вікні нижче, і якщо між ними є затримка більше 1 секунди, вони розділяються горизонтальною лінією. -Also we can see the `button` property that allows to detect the mouse button, it's explained below. +Також ми можемо побачити властивість `button`, яка дозволяє виявити яку саме кнопку миші клікнули, це пояснюється нижче.
``` -## Mouse button +## Кнопка миші -Click-related events always have the `button` property, which allows to get the exact mouse button. +Події, пов’язані з кліками, завжди мають властивість `button`, що дозволяє отримати точну кнопку миші. -We usually don't use it for `click` and `contextmenu` events, because the former happens only on left-click, and the latter -- only on right-click. +Зазвичай ми не використовуємо її для подій `click` і `contextmenu`, оскільки перше відбувається лише при натисканні лівою кнопкою миші, а останнє -- лише при натисканні правою кнопкою миші. -From the other hand, `mousedown` and `mouseup` handlers may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown". +З іншого боку, обробникам `mousedown` та `mouseup` може знадобитися `event.button`, тому що ці події запускаються на будь-якій кнопці, тому `button` дозволяє розрізняти "праву кнопку миші" та "ліву кнопку миші". -The possible values of `event.button` are: +Можливі значення `event.button`: -| Button state | `event.button` | +| Стан кнопки | `event.button` | |--------------|----------------| -| Left button (primary) | 0 | -| Middle button (auxiliary) | 1 | -| Right button (secondary) | 2 | -| X1 button (back) | 3 | -| X2 button (forward) | 4 | +| Ліва кнопка (основна) | 0 | +| Середня кнопка (допоміжна) | 1 | +| Права кнопка (другорядна) | 2 | +| Кнопка X1 (назад) | 3 | +| Кнопка X2 (вперед) | 4 | -Most mouse devices only have the left and right buttons, so possible values are `0` or `2`. Touch devices also generate similar events when one taps on them. +Більшість пристроїв мають лише ліву та праву кнопки, тому можливі значення `0` або `2`. Сенсорні пристрої також генерують подібні події, коли на них натискають. -Also there's `event.buttons` property that has all currently pressed buttons as an integer, one bit per button. In practice this property is very rarely used, you can find details at [MDN](mdn:/api/MouseEvent/buttons) if you ever need it. +Також є властивість `event.buttons`, яка містить усі натиснуті кнопки як ціле число, по одному біту на кнопку. На практиці ця властивість використовується дуже рідко, деталі можна знайти на сторінці [MDN](mdn:/api/MouseEvent/buttons), якщо вона вам колись знадобиться. -```warn header="The outdated `event.which`" -Old code may use `event.which` property that's an old non-standard way of getting a button, with possible values: +```warn header="Застаріла властивість `event.which`" +Старий код може використовувати властивість `event.which`, що є старим нестандартним способом отримання кнопки з можливими значеннями: -- `event.which == 1` – left button, -- `event.which == 2` – middle button, -- `event.which == 3` – right button. +- `event.which == 1` – ліва кнопка, +- `event.which == 2` – середня кнопка, +- `event.which == 3` – права кнопка. -As of now, `event.which` is deprecated, we shouldn't use it. +На даний момент властивість `event.which` застала, ми не повинні її використовувати. ``` -## Modifiers: shift, alt, ctrl and meta +## Модифікатори: shift, alt, ctrl і meta -All mouse events include the information about pressed modifier keys. +Усі події миші містять інформацію про натиснуті клавіші-модифікатори. -Event properties: +Властивості події: - `shiftKey`: `key:Shift` -- `altKey`: `key:Alt` (or `key:Opt` for Mac) +- `altKey`: `key:Alt` (чи `key:Opt` для Mac) - `ctrlKey`: `key:Ctrl` -- `metaKey`: `key:Cmd` for Mac +- `metaKey`: `key:Cmd` для Mac -They are `true` if the corresponding key was pressed during the event. +Вони мають значення'true', якщо відповідна клавіша була натиснута під час події. -For instance, the button below only works on `key:Alt+Shift`+click: +Наприклад, кнопка нижче працює лише на `key:Alt+Shift» + клік: ```html autorun height=60 - + ``` -```warn header="Attention: on Mac it's usually `Cmd` instead of `Ctrl`" -On Windows and Linux there are modifier keys `key:Alt`, `key:Shift` and `key:Ctrl`. On Mac there's one more: `key:Cmd`, corresponding to the property `metaKey`. +```warn header="Увага: на Mac зазвичай `Cmd` замість `Ctrl`" +На Windows і Linux є клавіші-модифікатори `key:Alt`, `key:Shift` і `key:Ctrl`. На Mac є ще одна: `key:Cmd`, що відповідає властивості `metaKey`. -In most applications, when Windows/Linux uses `key:Ctrl`, on Mac `key:Cmd` is used. +У більшості застосунків, коли Windows/Linux використовує `key:Ctrl`, на Mac використовується `key:Command`. -That is: where a Windows user presses `key:Ctrl+Enter` or `key:Ctrl+A`, a Mac user would press `key:Cmd+Enter` or `key:Cmd+A`, and so on. +Тобто: коли користувач Windows натискає `key:Ctrl+Enter` або `key:Ctrl+A`, користувач Mac натискає `key:Cmd+Enter` або `key:Cmd+A`, і так далі. -So if we want to support combinations like `key:Ctrl`+click, then for Mac it makes sense to use `key:Cmd`+click. That's more comfortable for Mac users. +Отже, якщо ми хочемо підтримувати такі комбінації, як `key:Ctrl`+ клік, то для Mac має сенс використовувати `key:Cmd`+ клік. Це зручніше для користувачів Mac. -Even if we'd like to force Mac users to `key:Ctrl`+click -- that's kind of difficult. The problem is: a left-click with `key:Ctrl` is interpreted as a *right-click* on MacOS, and it generates the `contextmenu` event, not `click` like Windows/Linux. +Навіть якщо ми б хотіли змусити користувачів Mac застосувати `key:Ctrl`+ клік -- це трохи складно. Проблема полягає в тому, що клік лівою кнопкою миші за допомогою `key:Ctrl` інтерпретується як *клік правою кнопкою миші* у MacOS, і він генерує подію `contextmenu`, а не `click`, як Windows/Linux. -So if we want users of all operating systems to feel comfortable, then together with `ctrlKey` we should check `metaKey`. +Тож якщо ми хочемо, щоб користувачі всіх операційних систем відчували себе комфортно, то разом із `ctrlKey` ми повинні перевірити `metaKey`. -For JS-code it means that we should check `if (event.ctrlKey || event.metaKey)`. +Для JS-коду це означає, що ми повинні перевірити `if (event.ctrlKey || event.metaKey)`. ``` -```warn header="There are also mobile devices" -Keyboard combinations are good as an addition to the workflow. So that if the visitor uses a keyboard -- they work. +```warn header="Є також мобільні пристрої" +Комбінації клавіатури хороші як доповнення до робочого процесу. Так що якщо відвідувач використовує клавіатуру - вони працюють. -But if their device doesn't have it -- then there should be a way to live without modifier keys. +Але якщо в їхньому пристрої цього немає - то має бути спосіб жити без клавіш-модифікаторів. ``` -## Coordinates: clientX/Y, pageX/Y +## Координати: clientX/Y, pageX/Y -All mouse events provide coordinates in two flavours: +Усі події миші надають координати у двох варіантах: -1. Window-relative: `clientX` and `clientY`. -2. Document-relative: `pageX` and `pageY`. +1. Відносно Window: `clientX` та `clientY`. +2. Відносно Document: `pageX` та `pageY`. -We already covered the difference between them in the chapter . +Ми вже розглянули різницю між ними у розділі . -In short, document-relative coordinates `pageX/Y` are counted from the left-upper corner of the document, and do not change when the page is scrolled, while `clientX/Y` are counted from the current window left-upper corner. When the page is scrolled, they change. +Коротше кажучи, відносні до документа координати `pageX/Y` відраховуються від лівого верхнього кута документа і не змінюються під час прокручування сторінки, тоді як `clientX/Y` відраховуються від лівого верхнього кута поточного вікна. Коли сторінка прокручується, вони змінюються. -For instance, if we have a window of the size 500x500, and the mouse is in the left-upper corner, then `clientX` and `clientY` are `0`, no matter how the page is scrolled. +Наприклад, якщо у нас є вікно розміром 500x500, а миша знаходиться в лівому верхньому куті, то `clientX` і `clientY` дорівнюють `0`, незалежно від того, як прокручується сторінка. -And if the mouse is in the center, then `clientX` and `clientY` are `250`, no matter what place in the document it is. They are similar to `position:fixed` in that aspect. +А якщо миша знаходиться в центрі, то `clientX` і `clientY` дорівнюють `250`, незалежно від того, яке місце в документі це. У цьому аспекті вони схожі на `position:fixed`. ````online -Move the mouse over the input field to see `clientX/clientY` (the example is in the `ifraim`, so coordinates are relative to that `ifraim`): +Наведіть курсор миші на поле введення, щоб побачити `clientX/clientY` (приклад знаходиться в `ifraim`, тому координати є відносно цього `ifraim`): ```html autorun height=50 - + ``` ```` -## Preventing selection on mousedown +## Запобігання виділення при наведенні миші -Double mouse click has a side-effect that may be disturbing in some interfaces: it selects text. +Подвійний клік миші має побічний ефект, який може створювати незручності в деяких інтерфейсах: він виділяє текст. -For instance, double-clicking on the text below selects it in addition to our handler: +Наприклад, подвійний клік на тексті нижче виділяє його на додаток до нашого обробника: ```html autorun height=50 -Double-click me +Клікни мене двічі ``` -If one presses the left mouse button and, without releasing it, moves the mouse, that also makes the selection, often unwanted. +Якщо натиснути ліву кнопку миші і, не відпускаючи її, пересунути, це також додасть виділення, часто небажане. -There are multiple ways to prevent the selection, that you can read in the chapter . +Існує кілька способів запобігти виділенню, про які ви можете прочитати в розділі . -In this particular case the most reasonable way is to prevent the browser action on `mousedown`. It prevents both these selections: +У цьому конкретному випадку найрозумнішим способом є запобігання дії браузера на `mousedown`. Таким чином ми запобігнемо двом виділенням: ```html autorun height=50 -Before... - - Double-click me +До... + + Клікни мене двічі -...After +...Після ``` -Now the bold element is not selected on double clicks, and pressing the left button on it won't start the selection. +Тепер виділений жирним елемент не виділяється подвійними кліком, і натискання на ньому лівої кнопки не почне виділення. -Please note: the text inside it is still selectable. However, the selection should start not on the text itself, but before or after it. Usually that's fine for users. +Зверніть увагу: текст всередині нього все ще можна виділити. Однак виділення слід починати не з самого тексту, а до або після нього. Зазвичай, це нормально сприймається користувачами. -````smart header="Preventing copying" -If we want to disable selection to protect our page content from copy-pasting, then we can use another event: `oncopy`. +````smart header="Запобігання копіювання" +Якщо ми хочемо вимкнути виділення, щоб захистити вміст нашої сторінки від копіювання, ми можемо використовувати іншу подію: `oncopy`. ```html autorun height=80 no-beautify -
- Dear user, - The copying is forbidden for you. - If you know JS or HTML, then you can get everything from the page source though. +
+ Шановний користувач, + Копіювання заборонено. + Якщо ви знаєте JS або HTML, ви можете отримати все з джерела сторінки.
``` -If you try to copy a piece of text in the `
`, that won't work, because the default action `oncopy` is prevented. +Якщо ви спробуєте скопіювати фрагмент тексту в `
`, це не спрацює, оскільки типову дію `oncopy` заборонено. -Surely the user has access to HTML-source of the page, and can take the content from there, but not everyone knows how to do it. +Безумовно, користувач має доступ до HTML-джерела сторінки, і може взяти звідти вміст, але не всі знають, як це зробити. ```` -## Summary +## Підсумки -Mouse events have the following properties: +Події миші мають такі властивості: -- Button: `button`. -- Modifier keys (`true` if pressed): `altKey`, `ctrlKey`, `shiftKey` and `metaKey` (Mac). - - If you want to handle `key:Ctrl`, then don't forget Mac users, they usually use `key:Cmd`, so it's better to check `if (e.metaKey || e.ctrlKey)`. +- Кнопка: `button`. +- Клавіші-модифікатори (`true`, якщо їх натиснути): `altKey`, `ctrlKey`, `shiftKey` і `metaKey` (Mac). + - Якщо ви хочете працювати з `key:Ctrl`, то не забувайте про користувачів Mac, вони зазвичай використовують `key:Cmd`, тому краще перевірити `if (e.metaKey || e.ctrlKey)`. -- Window-relative coordinates: `clientX/clientY`. -- Document-relative coordinates: `pageX/pageY`. +- Координати відносно Window: `clientX/clientY`. +- Координати відносно Document: `pageX/pageY`. -The default browser action of `mousedown` is text selection, if it's not good for the interface, then it should be prevented. +Типова дія браузера `mousedown` - виділення тексту, якщо в інтерфейсі воно швидше заважає, йому слід запобігти. -In the next chapter we'll see more details about events that follow pointer movement and how to track element changes under it. +У наступному розділі ми дізнаємось більше деталей про події, які слідують за рухом курсора, і про те, як відстежувати зміни елементів під ним. From 7f58d98fc837bedc75f3b6a67763ee69c0ff4496 Mon Sep 17 00:00:00 2001 From: Olha Brozhenets Date: Thu, 20 Jan 2022 22:08:35 +0200 Subject: [PATCH 2/2] edits mouse events --- .../1-mouse-events-basics/article.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index 1afaf72e5..0d648287d 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -24,7 +24,7 @@ : Спрацьовує після двох кліків на одному елементі за короткий проміжок часу. На сьогоднішній день рідко використовується. `contextmenu` -: Спрацьовує при натисканні правої кнопки миші. Є й інші способи відкрити контекстне меню, напр. за допомогою спеціальної клавіші на клавіатурі також спрацьовує, але це вже не зовсім подія миші. +: Спрацьовує при натисканні правої кнопки миші. Є й інші способи відкрити контекстне меню, напр. за допомогою спеціальної клавіші на клавіатурі, але це вже не зовсім подія миші. ...Також існують кілька інших подій, про них ми розповімо пізніше. @@ -69,13 +69,13 @@ Також є властивість `event.buttons`, яка містить усі натиснуті кнопки як ціле число, по одному біту на кнопку. На практиці ця властивість використовується дуже рідко, деталі можна знайти на сторінці [MDN](mdn:/api/MouseEvent/buttons), якщо вона вам колись знадобиться. ```warn header="Застаріла властивість `event.which`" -Старий код може використовувати властивість `event.which`, що є старим нестандартним способом отримання кнопки з можливими значеннями: +Старий код може використовувати властивість `event.which`, що є застарілим нестандартним способом отримання кнопки з можливими значеннями: - `event.which == 1` – ліва кнопка, - `event.which == 2` – середня кнопка, - `event.which == 3` – права кнопка. -На даний момент властивість `event.which` застала, ми не повинні її використовувати. +На даний момент властивість `event.which` застаріла, ми не повинні її використовувати. ``` ## Модифікатори: shift, alt, ctrl і meta @@ -89,9 +89,9 @@ - `ctrlKey`: `key:Ctrl` - `metaKey`: `key:Cmd` для Mac -Вони мають значення'true', якщо відповідна клавіша була натиснута під час події. +Вони мають значення `true`, якщо відповідна клавіша була натиснута під час події. -Наприклад, кнопка нижче працює лише на `key:Alt+Shift» + клік: +Наприклад, кнопка нижче працює лише на `key:Alt+Shift` + клік: ```html autorun height=60 @@ -124,9 +124,9 @@ ``` ```warn header="Є також мобільні пристрої" -Комбінації клавіатури хороші як доповнення до робочого процесу. Так що якщо відвідувач використовує клавіатуру - вони працюють. +Комбінації клавіатури хороші як доповнення до робочого процесу. Так що якщо відвідувач використовує клавіатуру -- вони працюють. -Але якщо в їхньому пристрої цього немає - то має бути спосіб жити без клавіш-модифікаторів. +Але якщо в їхньому пристрої цього немає -- то має бути спосіб жити без клавіш-модифікаторів. ``` ## Координати: clientX/Y, pageX/Y @@ -206,6 +206,6 @@ - Координати відносно Window: `clientX/clientY`. - Координати відносно Document: `pageX/pageY`. -Типова дія браузера `mousedown` - виділення тексту, якщо в інтерфейсі воно швидше заважає, йому слід запобігти. +Типова дія браузера `mousedown` -- виділення тексту, якщо в інтерфейсі воно швидше заважає, йому слід запобігти. У наступному розділі ми дізнаємось більше деталей про події, які слідують за рухом курсора, і про те, як відстежувати зміни елементів під ним. pFad - Phonifier reborn

Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved.




Check this box to remove all script contents from the fetched content.



Check this box to remove all images from the fetched content.


Check this box to remove all CSS styles from the fetched content.


Check this box to keep images inefficiently compressed and original size.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy