minor

Author: iliakan

2-ui/2-events/04-default-browser-action/article.md

@@ -15,7 +15,7 @@
 Есть два способа отменить действие браузера:
 
 - Основной способ – это воспользоваться объектом `event`. Для отмены действия браузера существует стандартный метод `event.preventDefault()`.
-- Если же обработчик назначен через `on<событие>` (не через `addEventListener`), то можно просто вернуть `false` из обработчика.
+- Если же обработчик назначен через `on<событие>` (не через `addEventListener`), то также можно вернуть `false` из обработчика.
 
 В следующем примере при клике по ссылке переход не произойдет:
 
@@ -30,7 +30,7 @@
 
 Единственное исключение – это `return false` из обработчика, назначенного через `on<событие>`.
 
-В других случаях return не нужен, он никак не обрабатываются.
+В других случаях `return` не нужен, он никак не обрабатываются.
 ```
 
 ### Пример: меню
@@ -49,7 +49,7 @@
 
 [iframe height=70 src="menu" link edit]
 
-HTML-разметка сделана так, что все элементы меню являются не кнопками, а ссылками, то есть тегами `<a>`. В этом подходе есть некоторые преимущества, например:
+В HTML-разметке все элементы меню являются не кнопками, а ссылками, то есть тегами `<a>`. В этом подходе есть некоторые преимущества, например:
 
 - Некоторые посетители очень любят сочетание "правый клик – открыть в новом окне". Если мы будем использовать `<button>` или `<span>`, то данное сочетание работать не будет.
 - Поисковые движки переходят по ссылкам `<a href="...">` при индексации.
@@ -66,32 +66,29 @@ menu.onclick = function(event) {
   alert( href ); // может быть подгрузка с сервера, генерация интерфейса и т.п.
 
 *!*
-  return false; // отменить переход по url
+  return false; // отменить действие браузера (переход по ссылке)
 */!*
 };
 ```
 
-Если мы уберём `return false`, то после выполнения обработчика события браузер выполнит "действие по умолчанию" - переход по адресу из `href`.
+Если мы уберём `return false`, то после выполнения обработчика события браузер выполнит "действие по умолчанию" - переход по адресу из `href`. А это нам здесь не нужно, мы обрабатываем клик сами.
 
-Кстати, использование здесь делегирования событий делает наше меню гибким. Мы можем добавить вложенные списки и стилизовать их с помощью CSS – обработчик не потребует изменений.
+Кстати, использование здесь делегирования событий делает наше меню очень гибким. Мы можем добавить вложенные списки и стилизовать их с помощью CSS – обработчик не потребует изменений.
 
-
-## Отмена последующих событий
-
-Некоторые события естественным образом вытекают друг из друга. Если мы отменим первое событие, то последующие не выполнятся.
+````smart header="События, вытекающие из других"
+Некоторые события естественным образом вытекают друг из друга. Если мы отменим первое событие, то последующие не возникнут.
 
 Например, событие `mousedown` для поля `<input>` приводит к фокусировке на нём и запускает событие `focus`. Если мы отменим событие `mousedown`, то фокусирования не произойдёт.
 
-В следующем примере попробуйте нажать на первом `<input>` -- происходит событие `focus`. Это нормально.
-
-Но если вы нажимаете по второму элементу, то события `focus` не будет.
+В следующем примере попробуйте нажать на первом `<input>` -- происходит событие `focus`. Но если вы нажимаете по второму элементу, то события `focus` не будет.
 
 ```html run autorun
 <input value="Фокус работает" onfocus="this.value=''">
 <input *!*onmousedown="return false"*/!* onfocus="this.value=''" value="Кликни меня">
 ```
 
-Это потому, что отменено стандартное действие `mousedown`. Но фокусировка на элементе всё ещё возможна, если мы будем использовать другой способ. Например, нажатием клавиши `key:Tab` можно перейти от первого поля ввода ко второму. Но только не через нажатие мышью по элементу, это больше не работает.
+Это потому, что отменено стандартное действие `mousedown`. Впрочем, фокусировка на элементе всё ещё возможна, если мы будем использовать другой способ. Например, нажатием клавиши `key:Tab` можно перейти от первого поля ввода ко второму. Но только не через клик мышью на элемент, это больше не работает.
+````
 
 ## Опция "passive" для обработчика
 
@@ -105,7 +102,7 @@ menu.onclick = function(event) {
 
 Опция `passive: true` сообщает браузеру, что обработчик не собирается отменять прокрутку. Тогда браузер начинает её немедленно, обеспечивая максимально плавный интерфейс, параллельно обрабатывая событие.
 
-Для некоторых браузеров (Firefox, Chrome) опция `passive` по умолчанию включена `true` для таких событий, как `touchstart` и `touchmove`.
+Для некоторых браузеров (Firefox, Chrome) опция `passive` по умолчанию включена в `true` для таких событий, как `touchstart` и `touchmove`.
 
 
 ## event.defaultPrevented
@@ -116,25 +113,27 @@ menu.onclick = function(event) {
 
 Помните, в главе <info:bubbling-and-capturing> мы говорили о `event.stopPropagation()` и упоминали, что останавливать "всплытие" - плохо?
 
-Иногда вместо этого мы можем использовать `event.defaultPrevented`.
+Иногда вместо этого мы можем использовать `event.defaultPrevented`, чтобы просигналить другим обработчикам, что событие обработано.
 
-Давайте посмотрим практический пример, где остановка всплытия кажется обязательной, но на самом деле мы можем обойтись без него.
+Давайте посмотрим практический пример.
 
 По умолчанию браузер при событии `contextmenu` (клик правой кнопкой мыши) показывает контекстное меню со стандартными опциями. Мы можем отменить событие по умолчанию и показать своё меню, как здесь:
 
 ```html autorun height=50 no-beautify run
-<button>Кликните правой кнопкой мыши для вызова контекстного меню браузера</button>
+<button>Правый клик вызывает контекстное меню браузера</button>
 
 <button *!*oncontextmenu="alert('Рисуем наше меню'); return false"*/!*>
-  Кликните правой кнопкой мыши для вызова нашего контекстного меню
+  Правый клик вызывает наше контекстное меню
 </button>
 ```
 
-Теперь предположим, что мы хотим реализовать собственное контекстное меню для всего документа с нашими опциями. И внутри документа мы можем иметь другие элементы, у которых может быть своё контекстное меню:
+Теперь в дополнение к этому контекстному меню реализуем контекстное меню для всего документа.
+
+При правом клике должно показываться ближайшее контекстное меню.
 
 ```html autorun height=80 no-beautify run
-<p>Кликните правой кнопкой здесь для контекстного меню документа</p>
-<button id="elem">Кликните правой кнопкой здесь для контекстного меню кнопки</button>
+<p>Правый клик здесь вызывает контекстное меню документа</p>
+<button id="elem">Правый клик здесь вызывает контекстное меню кнопки</button>
 
 <script>
   elem.oncontextmenu = function(event) {
@@ -151,11 +150,11 @@ menu.onclick = function(event) {
 
 Проблема заключается в том, что когда мы кликаем по элементу `elem`, то мы получаем два меню: контекстное меню для кнопки и (событие всплывает вверх) контекстное меню для документа.
 
-Одним из решений будет полностью обработать событие в обработчике кнопки и остановить всплытие, используя `event.stopPropagation()`:
+Как это поправить? Одно из решений - это подумать: "Когда мы обрабатываем правый клик в обработчике на кнопке, остановим всплытие", и вызвать `event.stopPropagation()`:
 
 ```html autorun height=80 no-beautify run
-<p>Кликните правой кнопкой для меню документа</p>
-<button id="elem">Кликните правой кнопкой для меню кнопки (добавлен event.stopPropagation)</button>
+<p>Правый клик вызывает меню документа</p>
+<button id="elem">Правый клик вызывает меню кнопки (добавлен event.stopPropagation)</button>
 
 <script>
   elem.oncontextmenu = function(event) {
@@ -179,8 +178,8 @@ menu.onclick = function(event) {
 
 
 ```html autorun height=80 no-beautify run
-<p>Кликните правой кнопкой мыши для меню документа (добавлен event.defaultPrevented)</p>
-<button id="elem">Кликните правой кнопкой для меню кнопки</button>
+<p>Правый клик вызывает меню документа (добавлена проверка event.defaultPrevented)</p>
+<button id="elem">Правый клик вызывает меню кнопки</button>
 
 <script>
   elem.oncontextmenu = function(event) {
@@ -206,7 +205,7 @@ menu.onclick = function(event) {
 ```
 
 ```smart header="Архитектура вложенных контекстных меню"
-Есть также несколько альтернативных путей, чтобы реализовать вложенные контекстные меню. Одним из них является специальный глобальный объект с методом, который обрабатывает `document.oncontextmenu`, и также методами, позволяющими хранить в нём различные "низкоуровневые" обработчики.
+Есть также несколько альтернативных путей, чтобы реализовать вложенные контекстные меню. Одним из них является единый глобальный объект с обработчиком `document.oncontextmenu` и методами, позволяющими хранить в нём другие обработчики.
 
 Объект будет перехватывать любой клик правой кнопкой мыши, просматривать сохранённые обработчики и запускать соответствующий.
 
@@ -220,7 +219,6 @@ menu.onclick = function(event) {
 - `mousedown` -- начинает выделять текст (если двигать мышкой).
 - `click` на `<input type="checkbox">` --  ставит или убирает галочку в `input`.
 - `submit` -- при нажатии на `<input type="submit">` или при нажатии клавиши `key:Enter` в форме данные отправляются на сервер.
-- `wheel` -- движение колёсика мыши инициирует прокрутку.
 - `keydown` -- при нажатии клавиши в поле ввода появляется символ.
 - `contextmenu` -- при правом клике показывается контекстное меню браузера.
 - ...и многие другие...
@@ -238,7 +236,7 @@ menu.onclick = function(event) {
 
 Но нам следует сохранять семантическое значение HTML элементов. Например, не кнопки, а тег `<a>` должен применяться для переходов по ссылкам.
 
-Помимо того, что это "хорошо", это делает ваш HTML лучше с точки зрения доступности.
+Помимо того, что это "хорошо", это делает ваш HTML лучше с точки зрения доступности для инвалидов и с особых устройств.
 
 Также, если мы рассматриваем пример с тегом `<a>`, то обратите внимание: браузер предоставляет возможность открывать ссылки в новом окне (кликая правой кнопкой мыши или используя другие возможности). И пользователям это нравится. Но если мы заменим ссылку кнопкой и стилизуем её как ссылку, используя CSS, то специфичные функции браузера для тега `<a>` всё равно работать не будут.
 ```