Что такое preventDefault() в JavaScript

"PreventDefault()". "Что такое preventDefault() в JavaScript"

Разберем подробно, что такое preventDefault() в JavaScript.

Заголовок_навигации

1. Что такое preventDefault() в JavaScript?
2. Пример preventDefault().

1. Что такое preventDefault() в JavaScript?

preventDefault() — метод объекта Eventв JavaScript, который отменяет действие браузера по умолчанию, связанное с определённым событием.

Для чего preventDefault() в JavaScript?

Например, preventDefault() можно использовать для:

отменить переход по ссылке при клике;

предотвратить отправку формы при нажатии кнопки «Отправить»;

заблокировать стандартное контекстное меню (при клике правой кнопкой мыши);

остановить перетаскивание элементов (drag‑and‑drop);

запретить ввод определённых символов в поле формы.

Синтаксис preventDefault() в JavaScript.

event.preventDefault();

Где event — объект события, передаваемый в обработчик.

Как работает preventDefault() в JavaScript.

Пользователь совершает действие (кликает на ссылку, отправляет форму и т. д.).

Браузер генерирует объект события (Event) и запускает цепочку обработчиков.

Если в одном из обработчиков вызывается event.preventDefault(), браузер не выполняет своё стандартное действие для этого события.

Код после preventDefault() продолжает выполняться — можно запустить свою логику (показать попап, проверить данные и т. п.).

2. Пример preventDefault().

Рассмотрим простейший пример использования "preventDefault()":

Для этого нам понадобится...

Как вы знаете или не знаете, но существует ссылка в html.

Действие по умолчанию переход по адресу указанной в атрибуте "href", пусть это будет переход на главную "jsphp.ru":

<a href="https://jsphp.ru">Проверь preventDefault()</a>

Добавляем onclick.

Внутрь onclick помещаем "event.preventDefault()" + alert, чтобы вы увидели текстовое сообщение...

Соберем простой пример preventDefault().

<a href="https://example.com" onclick="event.preventDefault(); alert('Как видите, переход по ссылке заблокирован!');">Проверь preventDefault()</a>

Проверка примера preventDefault().

Для того, чтобы проверить preventDefault() - нажмите на кнопку

Проверь preventDefault()
Всего комментариев : Comments+ 2.0

+ =