JS метод Event.preventDefault()

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

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

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

Приклад:

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

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

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

Синтаксис

event.preventDefault();

Параметри

Return

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

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/bGXKxQq">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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

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

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

JS довідник

JavaScript

Наповнення JS розділу