Merge pull request #1604 from Rnbsov/patch-61

Update article about mouse events

Author: ruslauz

2-ui/3-event-details/1-mouse-events-basics/article.md

@@ -1,3 +1,4 @@
+
 # Основы событий мыши
 
 В этой главе мы более детально рассмотрим события мыши и их свойства.
@@ -6,11 +7,7 @@
 
 ## Типы событий мыши
 
-Мы можем разделить события мыши на две категории: "простые" и "комплексные".
-
-### Простые события
-
-Самые часто используемые простые события:
+Мы уже видели некоторые из этих событий:
 
 `mousedown/mouseup`
 : Кнопка мыши нажата/отпущена над элементом.
@@ -21,24 +18,20 @@
 `mousemove`
 : Каждое движение мыши над элементом генерирует это событие.
 
-`contextmenu`
-: Вызывается при попытке открытия контекстного меню, как правило, нажатием правой кнопки мыши. Но, заметим, это не совсем событие мыши, оно может вызываться и специальной клавишей клавиатуры.
-
-...Есть также несколько иных типов событий, которые мы рассмотрим позже.
-
-### Комплексные события
-
 `click`
 : Вызывается при `mousedown` , а затем `mouseup`  над одним и тем же элементом, если использовалась левая кнопка мыши.
 
 `dblclick`
 : Вызывается двойным кликом на элементе.
 
-Комплексные события состоят из простых, поэтому в теории мы могли бы без них обойтись. Но хорошо, что они существуют, потому что работать с ними очень удобно.
+`contextmenu`
+: Вызывается при попытке открытия контекстного меню, как правило, нажатием правой кнопки мыши. Но, заметим, это не совсем событие мыши, оно может вызываться и специальной клавишей клавиатуры.
 
-### Порядок событий
+...Есть также несколько иных типов событий, которые мы рассмотрим позже.
 
-Одно действие может вызвать несколько событий.
+## Порядок событий
+
+Как вы можете видеть из приведённого выше списка, действие пользователя может вызвать несколько событий.
 
 Например, клик мышью вначале вызывает `mousedown`, когда кнопка нажата, затем `mouseup` и `click`, когда она отпущена.
 
@@ -49,32 +42,50 @@
 
 В окне теста ниже все события мыши записываются, и если задержка между ними более 1 секунды, то они разделяются горизонтальной чертой.
 
-При этом мы также можем увидеть свойство `which`, которое позволяет определить, какая кнопка мыши была нажата.
+Кроме того, мы можем видеть свойство `button`, которое позволяет нам определять кнопку мыши; это объясняется ниже.
 
 <input onmousedown="return logMouse(event)" onmouseup="return logMouse(event)" onclick="return logMouse(event)" oncontextmenu="return logMouse(event)" ondblclick="return logMouse(event)" value="Кликни меня левой или правой кнопкой мыши" type="button"> <input onclick="logClear('test')" value="Очистить" type="button"> <form id="testform" name="testform"> <textarea style="font-size:12px;height:150px;width:360px;"></textarea></form>
 ```
 
-## Получение информации о кнопке: which
+## Кнопки мыши
+
+События, связанные с кликом, всегда имеют свойство `button`, которое позволяет получить конкретную кнопку мыши.
+
+Обычно мы не используем его для событий `click` и `contextmenu`, потому что первое происходит только при щелчке левой кнопкой мыши, а второе - только при щелчке правой кнопкой мыши.
 
-События, связанные с кликом, всегда имеют свойство `which`, которое позволяет определить нажатую кнопку мыши.
+С другой стороны, обработчикам `mousedown` и `mouseup` может потребоваться `event.button`, потому что эти события срабатывают на любую кнопку, таким образом `button` позволяет различать "нажатие правой кнопки" и "нажатие левой кнопки".
 
-Это свойство не используется для событий `click` и `contextmenu`, поскольку первое происходит только при нажатии левой кнопкой мыши, а второе -- правой.
+Возможными значениями `event.button` являются:
 
-Но если мы отслеживаем `mousedown` и `mouseup`, то оно нам нужно, потому что эти события срабатывают на любой кнопке, и `which` позволяет различать между собой "нажатие правой кнопки" и "нажатие левой кнопки".
+| Состояние кнопки | `event.button` |
+|--------------|----------------|
+| Левая кнопка (основная) | 0 |
+| Средняя кнопка (вспомогательная) | 1 |
+| Правая кнопка (вторичная) | 2 |
+| Кнопка X1 (назад) | 3 |
+| Кнопка X2 (вперёд) | 4 |
 
-Есть три возможных значения:
+Большинство мышек имеют только левую и правую кнопку, поэтому возможные значения это 0 или 2. Сенсорные устройства также генерируют аналогичные события, когда кто-то нажимает на них.
 
-- `event.which == 1` -- левая кнопка
-- `event.which == 2` -- средняя кнопка
-- `event.which == 3` -- правая кнопка
+Также есть свойство `event.buttons`, в котором все нажатые в данный момент кнопки представлены в виде целого числа, по одному биту на кнопку. На практике это свойство используется очень редко, вы можете найти подробную информацию по адресу [MDN](mdn:/api/MouseEvent/buttons), если вам это когда-нибудь понадобится.
+
+```warn header="Устаревшее свойство `event.which`"
+В старом коде вы можете встретить `event.which` свойство - это старый нестандартный способ получения кнопки с возможными значениями:
+
+- `event.which == 1` – левая кнопка,
+- `event.which == 2` – средняя кнопка,
+- `event.which == 3` – правая кнопка.
+
+На данный момент `event.which` устарел, нам не следует его использовать.
+```
 
 Средняя кнопка сейчас -- скорее экзотика, и используется очень редко.
 
 ## Модификаторы: shift, alt, ctrl и meta
 
 Все события мыши включают в себя информацию о нажатых клавишах-модификаторах.
 
-Свойства объекта события:
+Свойства события:
 
 - `shiftKey`: `key:Shift`
 - `altKey`: `key:Alt` (или `key:Opt` для Mac)
@@ -116,7 +127,9 @@
 ```
 
 ```warn header="Не забывайте про мобильные устройства"
-Комбинации клавиш на клавиатуре -- это хорошее дополнение к рабочему процессу. Если у пользователя есть клавиатура -- они работают. Ну а если на его устройстве её нет -- должен быть другой способ сделать то же самое.
+Комбинации клавиш хороши в качестве дополнения к рабочему процессу. Так что, если посетитель использует клавиатуру – они работают.
+
+Но если на их устройстве его нет – тогда должен быть способ жить без клавиш-модификаторов.
 ```
 
 ## Координаты: clientX/Y, pageX/Y
@@ -126,7 +139,13 @@
 1. Относительно окна: `clientX` и `clientY`.
 2. Относительно документа: `pageX` и `pageY`.
 
-Например, если у нас есть окно размером 500x500, и курсор мыши находится в левом верхнем углу, то значения `clientX` и `clientY` равны `0`. А если мышь находится в центре окна, то значения `clientX` и `clientY` равны `250` независимо от того, в каком месте документа она находится и до какого места документ прокручен. В этом они похожи на `position:fixed`.
+Мы уже рассмотрели разницу между ними в главе <info:coordinates>.
+
+Если в кратце, то относительные координаты документа `pageX/Y` отсчитываются от левого верхнего угла документа и не меняются при прокрутке страницы, в то время как `clientX/Y` отсчитываются от левого верхнего угла текущего окна. Когда страница прокручивается, они меняются.
+
+Например, если у нас есть окно размером 500x500, и курсор мыши находится в левом верхнем углу, то значения `clientX` и `clientY` равны `0`, независимо от того, как прокручивается страница.
+
+А если мышь находится в центре окна, то значения `clientX` и `clientY` равны `250` независимо от того, в каком месте документа она находится и до какого места документ прокручен. В этом они похожи на `position:fixed`.
 
 ````online
 Наведите курсор мыши на поле ввода, чтобы увидеть `clientX/clientY` (пример находится в `iframe`, поэтому координаты определяются относительно этого `iframe`):
@@ -185,7 +204,7 @@
 
 События мыши имеют следующие свойства:
 
-- Кнопка: `which`.
+- Кнопка: `button`.
 - Клавиши-модификаторы (`true` если нажаты): `altKey`, `ctrlKey`, `shiftKey` и `metaKey` (Mac).
   - Если вы планируете обработать `key:Ctrl`, то не забудьте, что пользователи Mac обычно используют `key:Cmd`, поэтому лучше проверить `if (e.metaKey || e.ctrlKey)`.
 

2-ui/3-event-details/1-mouse-events-basics/head.html

@@ -25,7 +25,7 @@
   function logMouse(e) {
      let evt = e.type;
      while (evt.length < 11) evt += ' ';
-     showmesg(evt + " which=" + e.which, 'test')
+     showmesg(evt + " button=" + e.button, 'test')
      return false;
   }