Типові дії браузера

Багато подій автоматично призводять до певних дій, які виконує браузер.

Наприклад:

• Клік на посилання ініціює навігацію до його URL-адреси.
• Клік на кнопку відправки форми ініціює Ñ—Ñ— відправку на сервер.
• Натискання кнопки миші на тексті Ñ– переміщення курсору – виділяє текст.

Якщо ми обробляємо подію в JavaScript, ми можемо не захотіти, щоб відбулась типова дія браузера, і замість цього захочемо реалізувати іншу поведінку.

Запобігання дії браузера

Є два способи запобігти діям браузера:

• Основний спосіб – це використовувати об’єкт event. Існує метод event.preventDefault().
• Якщо обробник призначено за допомогою on<event> (а не addEventListener), повернення false спрацює так само.

У цьому HTML після кліку на посилання навігація не відбувається, браузер нічого не робить:

<a href="/" onclick="return false">Клікніть тут</a>
чи
<a href="/" onclick="event.preventDefault()">тут</a>

У наступному прикладі ми використаємо цю техніку для створення меню на основі JavaScript.

Приклад: меню

Розглянемо таке меню сайту:

<ul id="menu" class="menu">
  <li><a href="/html">HTML</a></li>
  <li><a href="/javascript">JavaScript</a></li>
  <li><a href="/css">CSS</a></li>
</ul>

Ось так це може виглядати в певними CSS-правилами:

Пункти меню реалізовані як HTML-посилання <a>, а не кнопки <button>. Для цього Ñ” кілька причин, наприклад:

• Багато людей люблять використовувати “клік правою кнопкою миші” як “відкрити в новому вікні”. Якщо ми використаємо <button> або <span>, це не спрацює.
• Під час індексації пошукові системи переходять за посиланнями <a href="...">.

Тому ми використовуємо <a> у розмітці. Але зазвичай ми маємо намір обробляти кліки в JavaScript. Тому ми повинні запобігати типовим діям браузера.

Як тут:

menu.onclick = function(event) {
  if (event.target.nodeName != 'A') return;

  let href = event.target.getAttribute('href');
  alert( href ); // ...може бути завантаження з сервера, генерація інтерфейсу користувача тощо

  return false; // запобігання діям браузера (перехід за URL-адресою не відбудеться)
};

Якщо ми опустимо return false, то після виконання нашого коду браузер виконає свою “типову дію” – перехід до URL-адреси в href. Тут нам це не потрібно, оскільки ми самі обробляємо клік.

До речі, використання тут делегування подій робить наше меню дуже гнучким. Ми можемо додавати вкладені списки та стилізувати їх за допомогою CSS.

<input value="Фокус працює" onfocus="this.value=''">
<input onmousedown="return false" onfocus="this.value=''" value="Клікни на мене">

Опція «пасивного» обробника

Необов’язковий параметр passive: true для addEventListener сигналізує браузеру, що обробник не збирається викликати preventDefault().

Чому це може знадобитися?

На мобільних пристроях Ñ” деякі події, наприклад touchmove (коли користувач переміщує палець по екрану), які типово викликають прокручування, але цьому прокручуванню можна запобігти за допомогою preventDefault() в обробнику.

Тому, коли браузер виявляє таку подію, він повинен спочатку опрацювати всі обробники, а потім, якщо preventDefault ніде не викликано, він може продовжити прокручування. Це може призвести до непотрібних затримок та миготіння в інтерфейсі користувача.

Параметр passive: true повідомляє браузеру, що обробник не збирається скасовувати прокручування. Тоді браузер відразу прокручує його, забезпечуючи максимально плавний користувацький досвід, попутно обробляючи подію.

Для деяких браузерів (Firefox, Chrome) параметр passive має типове значення true для таких подій як touchstart або touchmove.

event.defaultPrevented

Властивість event.defaultPrevented має значення true, якщо типову дію було скасовано, Ñ– false в іншому випадку.

Є цікавий варіант використання.

Пам’ятаєте, в розділі Бульбашковий механізм (спливання та занурення) ми говорили про event.stopPropagation() Ñ– чому припинення спливання – це погано?

Іноді замість цього ми можемо використовувати event.defaultPrevented, щоб повідомити іншим обробникам, що подія була оброблена.

Розглянемо практичний приклад.

Типово браузер під час події contextmenu (клік правою кнопкою миші) показує контекстне меню зі стандартними параметрами. Ми можемо запобігти цьому Ñ– показати своє, ось так:

<button>Правий клік показує контекстне меню браузера</button>

<button oncontextmenu="alert('Малюємо наше меню'); return false">
  Правий клік показує наше власне контекстне меню
</button>

Тепер, на додаток до цього контекстного меню, ми хотіли б реалізувати контекстне меню всього документа.

Після кліку правою кнопкою миші має з’явитися найближче контекстне меню.

<p>Правий клік, щоб відкрити контекстне меню документа</p>
<button id="elem">Правий клік, щоб відкрити контекстне меню кнопки</button>

<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Контекстне меню кнопки");
  };

  document.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Контекстне меню документа");
  };
</script>

Проблема полягає в тому, що коли ми клікаємо на elem, ми отримуємо два меню: на рівні кнопки та (подія спливає) на рівні документа.

Як це виправити? Одне з рішень полягає в тому, щоб подумати так: «Коли ми обробляємо правий клік в обробнику кнопки, давайте зупинимо спливання події» та використовуємо event.stopPropagation():

<p>Правий клік, щоб відкрити меню документа</p>
<button id="elem">Правий клік, щоб відкрити меню кнопки (виправлено за допомогою event.stopPropagation)</button>

<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    event.stopPropagation();
    alert("Контекстне меню кнопки");
  };

  document.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Контекстне меню документа");
  };
</script>

Тепер меню на рівні кнопки працює, як задумано. Але якою ціною? Ми назавжди забороняємо доступ до інформації про клік правою кнопкою миші для будь-якого зовнішнього коду, включаючи лічильники, які збирають статистику тощо. Це зовсім нерозумно.

Альтернативним рішенням було б перевірити в обробнику document, чи запобігли типовим дії? Якщо це так, значить, подія була оброблена, Ñ– нам не потрібно на це реагувати.

<p>Правий клік, щоб відкрити контекстне меню документа (додано перевірку для event.defaultPrevented)</p>
<button id="elem">Правий клік, щоб відкрити меню кнопки</button>

<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Контекстне меню кнопки");
  };

  document.oncontextmenu = function(event) {
    if (event.defaultPrevented) return;

    event.preventDefault();
    alert("Контекстне меню документа");
  };
</script>

Тепер теж все працює коректно. Якщо ми маємо вкладені елементи, Ñ– кожен з них має власне контекстне меню, це також спрацює. Просто не забудьте перевірити наявність event.defaultPrevented у кожному обробнику contextmenu.

Підсумки

Існує багато типових дій браузера:

• mousedown – розпочинає виділення (якщо перемістити курсор).
• click на <input type="checkbox"> – додає/знімає прапорець з input.
• submit – браузер надсилає форму на сервер після кліку на <input type="submit"> або натискання Enter всередині поля форми.
• keydown – натискання клавіші може призвести до додавання символу в поле або інших дій.
• contextmenu – подія відбувається при правому кліку та полягає в тому, щоб показати контекстне меню браузера.
• …та багато інших…

Усім типовим діям можна запобігти, якщо ми хочемо обробляти подію виключно за допомогою JavaScript.

Щоб запобігти типовій дії, використовуйте event.preventDefault() або return false. Другий метод працює лише для обробників, призначених за допомогою on<event>.

Параметр passive: true для addEventListener повідомляє браузеру, що дію не буде скасовано. Це корисно для деяких мобільних подій, таких як touchstart Ñ– touchmove, щоб повідомити браузеру, що він не повинен чекати закінчення роботи обробників, перш ніж разпочати прокрутку.

Якщо типову дію було скасовано, значення event.defaultPrevented стає true, інакше false.