event.preventDefault() против return false в обработчиках событий JavaScript

Основное различие: отмена действия vs. остановка распространения

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

1. event.preventDefault() — отмена стандартного поведения

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

Какие действия можно отменить:

• Переход по ссылке (<a href="...">)
• Отправку формы (<input type="submit">)
• Открытие контекстного меню (contextmenu)
• Выделение текста (selectstart)
• Перетаскивание (dragstart)

Пример с чистой ссылкой:

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault(); // ссылка не откроется
  console.log('Клик обработан');
  // Другие обработчики на этом же элементе или родителях сработают!
});

2. return false — два разных поведения

Тут есть важный нюанс: return false работает по-разному в зависимости от того, как вы назначили обработчик.

В jQuery (и в старом атрибуте onclick="return false"):

// jQuery
$('a').on('click', function() {
  console.log('Клик');
  return false; // = event.preventDefault() + event.stopPropagation()
});

// Атрибут HTML
<a href="#" onclick="return false;">Ссылка</a>

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

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

В чистом JavaScript (addEventListener):

// Чистый JS — return false НЕ РАБОТАЕТ!
document.querySelector('a').addEventListener('click', function(event) {
  console.log('Клик');
  return false; // Просто возвращает значение, но НЕ отменяет действие!
  // Ссылка всё равно откроется
});

Для addEventListener возвращаемое значение игнорируется. Нужно явно вызывать event.preventDefault().

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

Используйте event.preventDefault(), если:

• Работаете с чистым JavaScript (addEventListener)
• Нужно отменить только стандартное действие, но разрешить всплытие события (например, для делегирования)
• Хотите явно указать намерение в коде

Используйте return false в jQuery, если:

• Работаете с jQuery (это идиоматично)
• Хотите и отменить действие, и остановить всплытие (но будьте осторожны — это может сломать делегирование)

Пример, где разница критична:

// Делегирование — обработчик на родителе
document.querySelector('div').addEventListener('click', function(event) {
  if (event.target.tagName === 'A') {
    event.preventDefault(); // Отменяем переход по ссылке
    // НО событие всё равно всплывёт к родителю
  }
});

// Если бы мы использовали return false в jQuery,
// событие бы не всплыло, и делегирование бы не сработало

4. Практический совет

В современном JavaScript (без jQuery) всегда используйте event.preventDefault(). Это явно, предсказуемо и соответствует стандартам. return false оставьте для jQuery или устаревших атрибутов HTML.

Если нужно остановить всплытие — используйте event.stopPropagation() отдельно. Так ваш код будет прозрачным и легко читаемым.

element.addEventListener('click', function(event) {
  event.stopImmediatePropagation();
  console.log('Первый обработчик');
});

// Этот обработчик НЕ сработает
element.addEventListener('click', function(event) {
  console.log('Второй обработчик'); // Никогда не вызовется
});

// jQuery source (упрощённо)
function handler(event) {
  if (ret === false) {
    event.preventDefault();
    event.stopPropagation();
  }
}

element.addEventListener('click', function(event) {
  if (event.cancelable) {
    event.preventDefault();
  } else {
    console.log('Это событие нельзя отменить');
  }
});