JS метод Event.preventDefault()

Загальний опис

preventDefault — це метод об’єкта Event, який зупиняє стандартну дію елемента при виникненні певної події. Наприклад, якщо він викликається на події click для посилання, яке веде на інший сайт, браузер не буде переходити за цим посиланням. Використовується для управління поведінкою елементів, наприклад, при натисканні на форму або на інтерактивний елемент, де бажано повністю контролювати дії користувача за допомогою JavaScript.

Метод preventDefault найчастіше застосовується в сценаріях, де події на елементах (як-от натискання посилань або відправка форми) потребують кастомного оброблення. Наприклад, для форми preventDefault часто використовується, щоб заблокувати стандартне надсилання і замість цього провести валідацію даних або показати повідомлення про помилку перед надсиланням.

Приклад:

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Форма не була надіслана, перевірте дані.');
});

Цей метод не можна використовувати на подіях, що не мають стандартної поведінки. Наприклад, виклик preventDefault на події load не матиме ефекту, оскільки подія load не запускає жодної дії, яку можна було б заблокувати.

правити

Порада

preventDefault дозволяє створювати кастомну логіку для будь-яких подій, таких як кліки чи натискання клавіш. Наприклад, можна легко створити випадаюче меню, яке з’являється при натисканні на посилання, не перенаправляючи користувача на іншу сторінку.

автор: Bond правити

Порада

Не забувай перевіряти умови перед застосуванням preventDefault. Наприклад, при кліку на посилання можна перевірити, чи воно має href, а якщо не має, то викликати preventDefault, щоб уникнути помилок.

автор: Bond правити

Порада

Навчайся використовувати preventDefault як частину умовної логіки. Наприклад, блокувати натискання певних клавіш на keydown або keypress, щоб уникнути введення неприпустимих символів.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.preventDefault();

Повернення

undefined

Повертає undefined, оскільки цей метод не має значення, яке можна отримати після виклику. Натомість він запобігає виконанню стандартної поведінки події в браузері. Наприклад, для події кліку на посиланні це означає, що браузер не переходить за вказаною URL-адресою.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	7	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	14.5.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<a href="#demo">перше посилання</a>
<a href="#demo2">друге посилання</a>

document.querySelector('a').addEventListener('click', function(event) {
  if (!confirm('Ви впевнені, що хочете залишити сторінку?')) {
    event.preventDefault();
  }
});

<button id="submitButton">Надіслати</button>
<input type="text" id="userInput" value="текст для прикладу" placeholder="Введи щось">

document.querySelector('#submitButton').addEventListener('click', function(event) {
  const input = document.querySelector('#userInput');
  if (input.value === '') {
    event.preventDefault();
    alert('Будь ласка, заповніть поле перед надсиланням.');
  }
});