Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить event.preventDefault()?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`event.preventDefault()`** скасовує типову поведінку браузера для певної події (перехід за посиланням, відправку форми, відкриття контекстного меню тощо), при цьому сама подія й далі відбувається, а обробники спрацьовують. **Ключове:** метод діє лише на події, у яких є стандартна поведінка, і не зупиняє спливання події - для цього потрібен окремий `stopPropagation()`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Визначення > `event.preventDefault()` - скасовує **типову поведінку**, яку браузер виконує при певній події. Подія все одно відбудеться (обробники спрацюють), але браузер **не виконає** свою стандартну дію. --- ## Приклади стандартних дій | Елемент / подія | Стандартна поведінка браузера | |---|---| | `<a href="...">` + `click` | перехід за посиланням | | `<form>` + `submit` | відправка форми і перезавантаження сторінки | | `<input type="text">` + `keypress Enter` | може викликати відправку форми | | Контекстне меню (`contextmenu`) | відкриття меню правої кнопки миші | | `<checkbox>` + `click` | зміна стану (галочка/знято) | --- ## Приклад 1: скасування переходу за посиланням ```javascript <a href="https://google.com" id="link">Перейти</a> <script> const link = document.querySelector('#link'); link.addEventListener('click', (event) => { event.preventDefault(); // скасовуємо перехід console.log('Посилання клікнуто, але переходу немає'); }); </script> ``` У консолі з'явиться повідомлення, але сторінка **не перейде** на Google. --- ## Приклад 2: запобігання відправці форми ```javascript <form id="login"> <input type="text" name="login" /> <button>Відправити</button> </form> <script> const form = document.querySelector('#login'); form.addEventListener('submit', (event) => { event.preventDefault(); // не даємо формі перезавантажити сторінку console.log('Форму оброблено вручну через JS'); }); </script> ``` Зазвичай використовується, якщо ти хочеш відправити дані **через JavaScript (fetch, axios)**, а не звичайною HTML-відправкою. --- ## Приклад 3: вимкнення контекстного меню ```javascript document.addEventListener('contextmenu', (event) => { event.preventDefault(); console.log('Контекстне меню вимкнено!'); }); ``` Тепер правий клік не відкриє стандартне меню. --- ## Приклад 4: комбінація зі stopPropagation() Іноді потрібно **і скасувати дію**, і **зупинити спливання**: ```javascript button.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); console.log('Клік перехоплено повністю'); }); ``` --- ## Важливо - `preventDefault()` **не зупиняє подію** - інші обробники (на цьому ж елементі або вище) все одно спрацюють. Щоб перервати все, потрібно використовувати `stopImmediatePropagation()`. - Працює **лише з подіями, у яких є стандартна поведінка**. Наприклад, на `div click` він **нічого не робить**, тому що клік по `div` не викликає стандартної дії. --- ## Підсумок | Метод | Що робить | Приклад | |---|---|---| | `event.preventDefault()` | Скасовує поведінку браузера | Не переходити за посиланням, не відправляти форму | | `event.stopPropagation()` | Припиняє спливання події | Не передавати подію батькам | | `event.stopImmediatePropagation()` | Повністю зупиняє всі обробники | Перервати все | --- > **Запам'ятай просто:** > `preventDefault()` - "Не виконуй стандартну дію!" > `stopPropagation()` - "Не піднімай подію вгору!"Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.