event.preventDefault() vs return false: Как не сломать свой JavaScript

Введение: Почему эта тема взрывает Stack Overflow?

Если вы когда-нибудь писали на JavaScript обработчик клика по ссылке или отправку формы, то наверняка сталкивались с ситуацией, когда браузер делает что-то сам, игнорируя вашу логику. Вы пишете alert('Привет!') на клик по ссылке, а браузер вместо этого упорно переходит на другую страницу. Знакомо?

Именно здесь на сцену выходят два легендарных метода: event.preventDefault() и return false. Вопрос "Что выбрать?" — один из самых популярных на Stack Overflow с десятками тысяч просмотров. И не зря: разница между ними критическая, и неправильный выбор может привести к трудноуловимым багам.

В этой статье мы раз и навсегда разберёмся:

• Что такое "действие по умолчанию" в браузере
• Как работают оба метода
• Главное отличие, которое сломало код тысячам разработчиков
• Когда использовать каждый из них
• Почему return false — это не всегда зло

Готовы? Поехали!

1. Что такое "действие по умолчанию"?

Прежде чем говорить о методах, давайте разберёмся, что мы вообще отменяем. Браузер — это умная машина с встроенным поведением для многих HTML-элементов:

• Ссылка (<a>): по умолчанию переходит по адресу из атрибута href.
• Форма (<form>): по умолчанию отправляет данные на сервер и перезагружает страницу.
• Кнопка отправки (<input type="submit">): отправляет форму.
• Контекстное меню (правый клик): показывает меню браузера.

Иногда это поведение нам нужно — например, когда пользователь действительно хочет перейти по ссылке. Но часто мы хотим перехватить это действие и выполнить свою логику: проверить форму перед отправкой, открыть ссылку в модальном окне, показать кастомное контекстное меню.

Именно для этого и нужны наши герои.

2. event.preventDefault() — джентльменский метод

Это метод объекта события (event). Он делает ровно одну вещь: отменяет действие браузера по умолчанию.

// Пример 1: Отмена перехода по ссылке
document.querySelector('a').addEventListener('click', function(event) {
    event.preventDefault();
    alert('Ссылка не сработала! Я её отменил.');
});

// Пример 2: Отмена отправки формы
document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault();
    // Теперь форма не перезагрузит страницу
    // Можно делать AJAX-запрос или валидацию
    console.log('Форма не отправилась. Проверяем данные...');
});

Обратите внимание: preventDefault() не останавливает всплытие события. Если у вас есть вложенные обработчики, событие продолжит "всплывать" вверх по DOM-дереву.

Это важно понимать: если вы хотите и отменить действие, и остановить всплытие, вам нужно вызывать оба метода: preventDefault() и stopPropagation().

3. return false — старый, но опасный друг

А вот return false — это зверь посложнее. Всё зависит от того, как именно вы добавляете обработчик.

Случай 1: Атрибуты HTML (onclick)

В древние времена (и до сих пор в старом коде) обработчики вешали прямо в HTML:

<a href="https://example.com" onclick="return false;">Кликни меня</a>

<form onsubmit="return validateForm();">
    <input type="submit" value="Отправить">
</form>

<script>
function validateForm() {
    // Если вернуть false — форма не отправится
    // Если true — отправится
    return false;
}
</script>

В этом случае return false работает как event.preventDefault() + event.stopPropagation() одновременно. Но это единственный случай, где такое поведение гарантировано.

Случай 2: addEventListener (современный подход)

А вот здесь начинается самое интересное. Если вы используете addEventListener, return false НИЧЕГО НЕ ДЕЛАЕТ с точки зрения отмены действия.

// ВНИМАНИЕ: Этот код НЕ отменит переход по ссылке!
document.querySelector('a').addEventListener('click', function(event) {
    return false; // Бесполезно!
    // Ссылка всё равно откроется
});

Почему? Потому что addEventListener ожидает, что вы будете использовать методы объекта event. Возвращаемое значение функции игнорируется браузером для целей отмены действия.

Это главная ловушка, в которую попадаются новички, переходящие с jQuery на чистый JavaScript.

4. А как же jQuery?

Ах, jQuery... Этот фреймворк внёс огромную путаницу. Дело в том, что в jQuery return false работает и в on(), и в click(), и в других методах. jQuery эмулирует поведение атрибутов HTML: return false внутри обработчика jQuery вызывает и preventDefault(), и stopPropagation().

// jQuery — return false работает как "всё в одном"
$('a').on('click', function() {
    alert('Ссылка заблокирована!');
    return false; // Отменяет и переход, и всплытие
});

Но будьте осторожны: если вы смешиваете jQuery и нативный JS, поведение может быть неожиданным.

5. Главное отличие: что происходит со всплытием?

Давайте составим чёткую таблицу различий:

Метод	Отменяет действие по умолчанию	Останавливает всплытие	Где работает
event.preventDefault()	✅ Да	❌ Нет	addEventListener, jQuery, атрибуты
event.stopPropagation()	❌ Нет	✅ Да	addEventListener, jQuery, атрибуты
return false (атрибуты HTML)	Блоги Swift vs Python для бэкенда: что выбрать в 2025 10 лучших фреймворков PHP для продвинутой веб-разработки Как устроиться C# разработчиком: советы и резюме на практике Рекомендаций по книгам Чистый код на Rust: Принципы и практики идиоматического программирования Функциональное программирование на Go (Golang) C++ Network Programming. Том 1: Освоение сложности с помощью ACE и паттернов Идиоматический Kotlin: пишем эффективный код Читайте также День из жизни Swift-разработчика: от чашки кофе до деплоя в App Store Нужно ли знать математику для изучения Python? Покрытие тестами JavaScript: инструменты и метрики кода Как проверить, пуст ли массив в PHP: 5 рабочих способов Внедрение зависимостей (Dependency Injection) в TypeScript: Полное руководство 🍪 Сначала примите условия Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie. Мы используем их для авторизации и улучшения работы сайта. Политика конфиденциальности Принять и продолжить Закрыть 🍪 Мы используем файлы cookie для авторизации, аналитики и улучшения работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с нашей политикой конфиденциальности. Принять Только необходимые