Preventdefault – защита вашего сайта от нежелательного поведения пользователей
preventDefault() - это метод объекта Event, который позволяет отменить стандартное поведение браузера при возникновении события. Обычно, когда пользователь взаимодействует с элементами на странице, браузер автоматически выполняет некоторые действия, связанные с этим элементом. Например, если пользователь нажимает на ссылку, то браузер переходит по этой ссылке на другую страницу. Если же мы хотим избежать этого поведения и выполнить свои действия, то применяется метод preventDefault().
Пример использования preventDefault() на JavaScript:
HTML:
Нажми меня
JavaScript:
const link = document.getElementById('link');
link.addEventListener('click', function(event) {
event.preventDefault();
console.log('Клик на ссылке!');
});
В данном примере применен метод preventDefault() для ссылки, которая имеет пустой атрибут href. При клике на ссылку в консоль будет выведено сообщение "Клик на ссылке!", а стандартное действие браузера не будет выполнено.
Также можно использовать метод preventDefault() для отмены стандартного действия формы при отправке. Например:
HTML:
JavaScript:
const form = document.getElementById('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('Форма отправлена!');
});
В данном примере при отправке формы метод preventDefault() отменяет отправку данных на сервер и выводит сообщение в консоль.