Не раз замечал, что в различных кодах используют то 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;}
- preventDefault; - return false;
СсылкаОтвет
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;
})
preventDefault
return false from onclick
return false
Комментариев нет:
Отправить комментарий