6

Не раз замечал, что в различных кодах используют то preventDefault(), то return false. И это касается, как маленьких, так и больших проектов.

По старинке, я привык использовать во всём return false, но недавно задумался: может preventDefault() лучше чем return? Почему его так часто используют?

Так всё же что лучше использовать: preventDefault() или return false?

var type = null;

for(var i = 0; i <= 1; i++){
  document.querySelectorAll('[name="type"]')[i].onclick = function() {
    type = this.value;
  };
};

document.querySelector('a').onclick = function(e) {
  if(type == 'pd'){
    e.preventDefault();
    alert('Прервано функцией preventDefault()!');
  }else if(type == 'rf'){
    alert('Прервано функцией return false!');
    return false;
  };
};
body {font-family: arial;}
<p>
  <input type="radio" name="type" value="pd"> - preventDefault;
  <input type="radio" name="type" value="rf"> - return false;
</p>
<a href="javascript:alert('Произошёл переход по ссылке!');">Ссылка</a>

2
  • ассоциация: stackoverflow.com/q/1357118/2110496
    – vp_arth
    27 мар 2017 в 16:49
  • 4
    @vp_arth, нифига там 2300 лайков у ответа) Ещё и +500 получил.. от меня такого не дождётесь :D
    – Yuri
    27 мар 2017 в 16:52

3 ответа 3

8

return false из обработчика события jQuery так же, как вызов обоих e.preventDefault и e.stopPropagation у переданного jQuery.Event события.

  • e.preventDefault() остановит обработку события по умолчанию,
  • e.stopPropagation() остановит всплытие события по DOM
  • return false остановит их оба.
  • e.stopImmediatePropagation предотвращает всплытие всех подобных событий (полезно, когда на элементе есть несколько обработчиков одного события)

В обычных (не-jQuery) обработчиках событий return false не запрещает всплывание(bubbling) события.

Также return false; в ванильном js не запрещает обработку события по умолчанию из addEventListener обработчиков.
Он работает только из el.onclick хендлеров.

Source: John Resig

Any benefit to using event.preventDefault() over "return false" to cancel out an href click?


Вольный перевод ответа с enSO

Вывод:

В jquery - полезнее return false
В vanillaJS - лучше его не использовать, он работает только с onclick-like обработчиками.


В IE8 и ниже необходимо заменить stopPropagation на cancelBubble, а preventDefault на return false;


Демонстрация

Третья ссылка совершает переход несмотря на return false

document.getElementById('a1').addEventListener('click', function(e){
 console.log('preventDefault - clicked');
 e.preventDefault();
});

document.getElementById('a2').onclick = function(){
 console.log('return false from onclick');
 return false;
};

document.getElementById('a3').addEventListener('click', function(){
 console.log('return false - clicked');
 return false;
})
<a id="a1" href="/">preventDefault</a><br/>
<a id="a2" href="/">return false from onclick</a><br/>
<a id="a3" href="/">return false</a><br/>

4
  • А если использовать и то, и то; что будет? :)
    – Yuri
    27 мар 2017 в 17:11
  • Где использовать? Что и то, и то? preventDefault и return false? return false после preventDefault не имеет смысла. Не в жуквери, разумеется.
    – vp_arth
    27 мар 2017 в 17:14
  • stopImmediatePropagation делает немного не то, что вы написали. developer.mozilla.org/ru/docs/Web/API/Event/… 27 апр 2017 в 13:04
  • @PavelMayorov, Если один из этих слушателей вызовет event.stopImmediatePropagation() тогда события оставшихся слушателей вызваны не будут. Я ведь ровно то же самое написал. По крайней мере имел в виду)
    – vp_arth
    27 апр 2017 в 13:18
4

Хорошая статья.

  • Если вы всего лишь хотите предотвратить действие браузера по умолчанию, то вам следует использовать preventDefault метод.
  • stopPropagation, который останавливает всплытие (bubbling) события к родительским элементам.
  • return false может отменить действие браузера при использовании в DOM Level 0 (inline-обработчик).
  • stopImmediatePropagation запрещает вызов всех остальных обработчиков даже на текущем событии.

// Отменяем действие браузера, в данном случае - переход по ссылке
document.querySelector('#preventDefault').addEventListener('click', function(e){
  e.preventDefault();
  console.info('preventDefault: %s', this.href);
});

// При клике на span - меняем цвет
// Можно убедится в этом кликом по тексту
document.querySelector('#stopPropagationSpan').addEventListener('click', function(e){
  this.style.color = 'green';
});
// А вот клик по ссылке не даст всплыть событию до span, смены цвета не будет
document.querySelector('#stopPropagationLink').addEventListener('click', function(e){
  e.stopPropagation();
  e.preventDefault(); // Просто для демонстрации, если убрать - переход будет
  console.info('stopPropagation: %s', this.href);
});

// Навешано 2 обработчика
// Без stopImmediatePropagation будет смена цвета с зелёного (green) на синий (blue)
// Однако, мы заблокировали дальнейшие обработчики, поэтому цве будет только зелёный
document.querySelector('#stopImmediatePropagation').addEventListener('click', function(e){
  e.stopImmediatePropagation();
  e.preventDefault(); // Просто для демонстрации, если убрать - переход будет
  this.style.color = 'green';
});
document.querySelector('#stopImmediatePropagation').addEventListener('click', function(e){
  this.style.color = 'blue';
});
<a href='normalLink'>Обычная ссылка, переход будет.</a><br /><br />
<a href='returnFalse' onclick='this.style.color = "black"; return false;'>Перехода нет, блокируется через "return false".</a><br /><br />
<a href='preventDefault' id='preventDefault'>preventDefault()</a><br /><br />
<span id='stopPropagationSpan'>
  <a href='stopPropagation' id='stopPropagationLink'>stopPropagation()</a><br />
  А тут клик отловится через span!
</span><br /><br />
<a href='stopImmediatePropagation' id='stopImmediatePropagation'>stopImmediatePropagation()</a>

7
  • В том-то и дело, что нифига он в vanillaJS не заменяет. Он вообще ничего не делает из addEventListener обработчиков
    – vp_arth
    27 мар 2017 в 16:45
  • 1) Что "не заменяет". 2) Работает, что Вы :)
    – user207618
    27 мар 2017 в 16:58
  • Добавил демо в свой ответ. То, что вы написали относится только к обработчикам jQuery
    – vp_arth
    27 мар 2017 в 17:04
  • @vp_arth, ох, Фома неверующий, посмотри - всё работает.
    – user207618
    27 мар 2017 в 17:42
  • ты о чём вообще? Я про return false заменяет вызов методов выше
    – vp_arth
    27 мар 2017 в 17:43
0
event.preventDefault()

По w3c это стандартный метод для отмены события.

https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-cancelation

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.