event.preventDefault() против return false: в чем разница?

С моего опыта, есть как минимум одно явное преимущество использования event.preventDefault() по сравнению с return false. Рассмотрим случай, когда вы обрабатываете событие клика по тэгу <a>. Если пользователь случайно будет перенаправлен с текущей страницы, это может вызвать серьезные проблемы. Если ваш обработчик клика использует return false для предотвращения навигации браузера, это создает риск того, что интерпретатор не достигнет этой строки, и браузер выполнит стандартное поведение тега <a>.

$('a').click(function (e) {
  // пользовательская логика здесь

  // оops... ошибка выполнения... куда же меня заведет href?

  return false;
});

Преимущество использования event.preventDefault() заключается в том, что вы можете разместить этот вызов в первой строке обработчика, тем самым гарантируя, что стандартное поведение тега <a> не будет выполнено, даже если последняя строка функции не будет достигнута (например, в случае ошибки выполнения).

$('a').click(function (e) {
  e.preventDefault();

  // пользовательская логика здесь

  // оops... ошибка выполнения, но, по крайней мере, пользователь не будет перенаправлен.
});

Вы можете привязать множество функций к событию onClick для одного элемента. Как можно быть уверенным, что функция, возвращающая false, будет последней, которая выполнится? В то же время preventDefault явно предотвратит только стандартное поведение элемента.

Для того чтобы гарантировать, что функция, возвращающая false, сработает последней, вам нужно контролировать порядок вызова функций. Обычно события обрабатываются в порядке их регистрации. Вы можете использовать метод addEventListener, и добавляя функции для одного и того же события, указывать их порядок. Например, добавляйте функцию, возвращающую false, последней, если хотите, чтобы она срабатывала в последнюю очередь.

Кроме того, вы можете создать обёртку вокруг функций, чтобы контролировать их выполнение. Например:

element.addEventListener('click', function(event) {
    function1();
    function2();
    // ... другие функции
    return false; // или call the last function that returns false
});

Таким образом, просто убедитесь, что ваша функция, возвращающая false, вызывается в нужное время.

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

Основное различие между return false и event.preventDefault() заключается в том, что код, расположенный ниже return false, не будет выполнен, тогда как в случае event.preventDefault() ваш код выполнится после этой инструкции.

Когда вы используете return false, это происходит следующее в фоновом режиме:

* Прекращает выполнение колбэков и сразу возвращает управление.
* Вызывает event.stopPropagation();
* Вызывает event.preventDefault();

Таким образом, return false является более кратким способом блокировки некоторых действий события, но также останавливает дальнейшее выполнение вашего кода в текущем контексте.

preventDefault() и return false — это разные способы предотвращения выполнения стандартного поведения события.

Например, когда пользователь кликает на внешнюю ссылку, мы должны отобразить модальное окно с подтверждением, спрашивающее пользователя, хочет ли он перейти на внешний сайт или нет:

hyperlink.addEventListener('click', function (e) {
    // Не перенаправляем пользователя по ссылке
    e.preventDefault();
});

Или мы не хотим отправлять форму при нажатии на кнопку отправки. Вместо этого мы сначала хотим провести валидацию формы:

submitButton.addEventListener('click', function (e) {
    // Не отправляем форму при нажатии на кнопку отправки
    e.preventDefault();
});

Различия

1. return false не окажет никакого эффекта на стандартное поведение, если вы используете метод addEventListener для обработки события. Он работает только тогда, когда обработчик события объявлен как атрибут элемента:

hyperlink.addEventListener('click', function (e) {
     // Не работает
     return false;
 });
    
 // Работает
 hyperlink.onclick = function (e) {
     return false;
};

2. Согласно спецификациям HTML 5, return false отменит событие, за исключением события mouseover.

Рекомендуемые практики

1. Рекомендуется использовать метод preventDefault вместо return false внутри обработчика события. Поскольку последнее работает только при использовании атрибута onclick, что приведет к удалению других обработчиков для того же события.
2. Если вы используете jQuery для управления событиями, то можете использовать return false внутри обработчика события:

$(element).on('click', function (e) {
        return false;
});

Перед возвратом значения false обработчик может выполнять какие-то действия. Проблема в том, что если в обработчике произойдет ошибка во время выполнения, мы не достигнем оператора return false в конце.

В этом случае стандартное поведение будет выполнено:

$(element).on('click', function (e) {
    // Выполняем здесь что-то, но если возникает ошибка во время выполнения
    // ...
    return false;
});

Мы можем избежать этой ситуации, используя метод preventDefault перед выполнением любых пользовательских действий в обработчике:

$(element).on('click', function (e) {
    e.preventDefault();

    // Выполняем здесь что-то
    // Стандартное поведение предотвращено, независимо от ошибок во время выполнения
    // ...
});

Полезно знать

Если вы используете jQuery для управления событием, то return false будет работать так же, как методы preventDefault() и stopPropagation():

$(element).on('click', function (e) {
    // Предотвращаем выполнение стандартного поведения и
    // предотвращаем всплытие события к родительскому элементу
    return false;
});