Остановка действия по умолчанию с onclick: preventDefault()

Быстрый ответ

Для отмены стандартного действия через пользовательскую функцию, вызываемую посредством атрибута onclick, следует передать ей объект event в качестве аргумента:

<button onclick="preventAction(event)">Нажми на меня</button> <!-- Не буду делать то, чего от меня ожидают! -->

function preventAction(e) {
  e.preventDefault(); // Здесь я решаю!
  // Далее следует дополнительный код
}

Достаточно перенаправить объект event в функцию и вызвать метод e.preventDefault(), чтобы подавить намерения браузера по умолчанию.

Обработка событий и preventDefault

Если нам предстоит изменить стандартную реакцию HTML-элементов, таких как ссылки или формы, мы обращаемся к надёжному методу preventDefault(). Однако обработчики, встроенные в атрибут onclick, могут усложнить процесс.

Сила объекта события

Передача объекта event в обработчик открывает доступ к preventDefault(), позволяя контролировать дальнейшее распространение события. Этот аспект крайне важен для управления синхронными и асинхронными операциями, зависящими от конкретных условий.

Подробнее об этом расскажет наш спикер на видео

Поддержка старых версий IE

У Интернет-Эксплорера старых версий может отсутствовать поддержка preventDefault(). В таком случае следует использовать альтернативное решение: event.returnValue = false.

Очищенность кода HTML при помощи jQuery

Рекомендуется не перегружать код HTML встроенными обработчиками событий для поддержки его чистоты. jQuery может назначить обработчики событий, которые блокируют стандартные действия:

$("button").on("click", function(e) {  // "Попробуй нажать на меня!"
  e.preventDefault();
  // А здесь начинается что-то увлекательное
});

Не только клики

Разберём не только onclick. Эффективная работа с событиями подразумевает назначение обработчиков классам и идентификаторам, делая структуру HTML более чистой и облегчая разделение обязанностей между обработчиками.

Перенаправление и обход кэша

Иногда необходимо программное перенаправление на URL с обходом кэша. В этих случаях к запросу добавляется временная метка через window.location:

function redirectToFreshUrl(event) {
  event.preventDefault();
  window.location = "/desired-url?" + (new Date().getTime() / 1000).toFixed();
}

Визуализация

Продемонстрируем, как применяется preventDefault() из функции, ассоциированной с атрибутом onclick HTML-элемента:

🖱️ **Пользователь нажимает на кнопку** ➡️ [🔗 атрибут `onclick`]

[🔗 атрибут `onclick`] ➡️ **Активирует пользовательскую функцию** ➡️ [🛑 применение `preventDefault()`]

Получаем:

Без `preventDefault()`:
📜 Веб-страница: [🔄 Действие выполнено как обычно]

С `preventDefault()`:
📜 Веб-страница: [✋ Стандартное действие остановлено]

Концепция: preventDefault() – это естественный стоп-сигнал, который прерывает автоматическое выполнение действий и передаёт вам полный контроль над событием.

Когда использовать preventDefault()

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

Взаимодействие с динамическим содержимым

Современные веб-приложения обладают возможностью динамического изменения содержимого без перезагрузки страницы. Использование preventDefault() позволяет оставить пользователя на текущей странице при инициации загрузки нового контента.

Приоритет доступности

Соблюдение стандартов доступности подразумевает, что все действия и навигация должны быть доступны без использования мыши. Включение preventDefault() в обработчики событий клавиатуры является важной составляющей создания удобной для пользователей интернет-среды.

Влияние на производительность

Использование preventDefault() не снижает производительность, а, наоборот, улучшает пользовательский опыт, предотвращая ненужные перезагрузки страницы и снижая нагрузку на сервер.

Полезные материалы

1. Event: preventDefault() method – Web APIs | MDN – подробное изучение метода preventDefault() в JavaScript.
2. Introduction to events – Learn web development | MDN – всеобъемлющий гид по обработке событий в веб-разработке.
3. Browser default actions – осознание процессов и управление стандартными действиями браузера.
4. javascript – event.preventDefault() vs. return false – Stack Overflow – сравнительный анализ применения preventDefault() и схожих подходов.
5. HTML DOM Event Object – обзор объекта события в DOM, его свойств и методов.
6. Event Delegation – статья, разъясняющая принципы управления событиями для группы элементов через делегирование.