event.preventDefault() vs return false: в чем разница в обработке событий?

Основное различие: что делают эти методы

Главное, что нужно запомнить: event.preventDefault() и return false – это НЕ одно и то же, хотя в некоторых ситуациях (особенно в jQuery) их эффект может быть похож.

Что делает event.preventDefault()

event.preventDefault() отменяет стандартное действие браузера для данного события. Например:

// Отмена перехода по ссылке
document.querySelector('a').addEventListener('click', function(event) {
    event.preventDefault();
});

// Отмена отправки формы
document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault();
});

// Отмена контекстного меню
document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});

Этот метод НЕ останавливает всплытие события (propagation). То есть если у вас есть вложенные элементы с обработчиками, событие всё равно всплывёт выше.

Что делает return false

В чистом JavaScript (без jQuery) return false внутри обработчика событий, добавленного через addEventListener, ничего не делает для отмены стандартного поведения. Он просто возвращает значение из функции, которое игнорируется.

// Это НЕ работает для отмены перехода
document.querySelector('a').addEventListener('click', function() {
    console.log('клик');
    return false; // бесполезно!
});

Однако return false работает, если обработчик назначен через атрибут HTML (onclick):

<a href="https://example.com" onclick="return false">Ссылка</a>

В этом случае возврат false действительно отменяет стандартное действие.

jQuery и return false

В jQuery return false делает сразу две вещи:

• event.preventDefault() – отменяет стандартное действие
• event.stopPropagation() – останавливает всплытие события

// jQuery: return false = preventDefault + stopPropagation
$('a').click(function() {
    return false; 
});

// Эквивалентно:
$('a').click(function(event) {
    event.preventDefault();
    event.stopPropagation();
});

Наглядный пример разницы

Рассмотрим ситуацию с вложенными элементами:

<div id="parent" style="padding: 20px; background: lightblue;">
    <a href="https://example.com" id="child">Нажми меня</a>
</div>

<script>
// Обработчик на родителе
document.getElementById('parent').addEventListener('click', function() {
    console.log('Родитель сработал');
});

// Обработчик на ссылке с preventDefault
document.getElementById('child').addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Только отмена перехода');
});
// Вывод: "Только отмена перехода" → "Родитель сработал" (всплытие работает)

// Если бы мы использовали jQuery return false:
$('#child').click(function() {
    return false;
});
// Вывод: только "Только отмена перехода" (всплытие остановлено)
</script>

Когда что использовать

• Всегда используйте event.preventDefault() в чистом JavaScript. Это явно указывает на ваше намерение отменить стандартное действие.
• Не используйте return false в обработчиках, назначенных через addEventListener – это бесполезно.
• В jQuery лучше быть явным: вызывайте event.preventDefault() и event.stopPropagation() отдельно, если вам нужно только одно из действий. return false – это "ленивый" способ, который может привести к неожиданному поведению.
• Для атрибутов HTML (onclick="return false") – это работает, но старайтесь избегать такого подхода в современном коде.

Итог

Запомните правило: event.preventDefault() отменяет действие, event.stopPropagation() останавливает всплытие, а return false в jQuery делает и то, и другое. В чистом JS return false в addEventListener игнорируется. Будьте явными – это сделает ваш код понятнее и предсказуемее.

// Делегирование: обработчик на родителе
$('#parent').on('click', 'a', function() {
    return false; // Остановит всплытие даже для других элементов!
});