Event.
Blokuje domyślne działanie przeglądarki dla zdarzenia, np. wysłanie formularza lub przejście pod adres linku.
- Zwraca
undefined
Przykład
#const form = document.querySelector('#login')
form.addEventListener('submit', (event) => {
event.preventDefault()
const data = new FormData(form)
console.log('Wysyłam przez fetch:', data.get('email'))
console.log('Strona nie przeładuje się:', event.defaultPrevented)
})
form.requestSubmit()Ostatni wiersz wysyła formularz z poziomu kodu, żeby wynik pojawił się od razu. Kliknięcie przycisku w podglądzie działa tak samo.
Definicja i zastosowanie
#Wiele zdarzeń ma domyślną reakcję przeglądarki: kliknięcie w link otwiera nowy adres, wysłanie formularza przeładowuje stronę, a kliknięcie w pole wyboru zmienia jego stan. Wywołanie event.preventDefault() w funkcji obsługi blokuje tę reakcję, dzięki czemu możesz obsłużyć sytuację po swojemu.
Najczęstszy przykład to formularz: blokujesz przeładowanie strony, sprawdzasz dane i wysyłasz je przez fetch(). Właściwość event.defaultPrevented pozwala sprawdzić, czy domyślne działanie zostało już zablokowane.
preventDefault() nie zatrzymuje przekazywania zdarzenia do elementów nadrzędnych, do tego służy stopPropagation(). Nie zadziała też w obsłudze dodanej z opcją passive: true ani dla zdarzeń, których nie da się anulować (wtedy event.cancelable ma wartość false).
Składnia
#event.preventDefault()Więcej przykładów
#const more = document.querySelector('#more')
more.addEventListener('click', (event) => {
event.preventDefault()
console.log('Ładuję kolejne kursy bez przechodzenia na inną stronę')
})
more.click()const terms = document.querySelector('#terms')
terms.addEventListener('click', (event) => {
event.preventDefault()
console.log('Najpierw przeczytaj regulamin')
})
terms.click()
console.log(terms.checked)Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- W obsłudze formularza wywołuj
preventDefault()na samym początku funkcji. Jeśli dalej wystąpi błąd, strona i tak się nie przeładuje. - Nie blokuj domyślnego działania bez potrzeby. Linki i przyciski powinny zachowywać się tak, jak oczekuje użytkownik, także przy obsłudze klawiaturą.
- Do zatrzymania przekazywania zdarzenia w górę, do rodziców, służy
stopPropagation(), a niepreventDefault().
Powiązane hasła
#- EventTarget.addEventListener()Rejestruje funkcję wywoływaną za każdym razem, gdy na elemencie wystąpi zdarzenie, np. kliknięcie.
- Event.targetElement, na którym faktycznie wystąpiło zdarzenie, np. kliknięty przycisk wewnątrz listy.
- FormDataZbiera wartości pól formularza w pary nazwa i wartość. Gotowy obiekt można odczytać albo wysłać do serwera przez fetch().
- fetch()Wysyła zapytanie HTTP i zwraca obietnicę z odpowiedzią serwera (obiektem Response).
- document.querySelector()Zwraca pierwszy element pasujący do selektora CSS albo null, gdy nic nie pasuje.
Widzisz błąd albo brakuje przykładu? Napisz do nas.