Когда я хочу, чтобы другие обработчики событий выполнялись после запуска определенного события, я могу использовать один из двух методов. Я буду использовать jQuery в примерах, но это относится и к plain-JS:
event.preventDefault()
$('a').click(function (e) {
// custom handling here
e.preventDefault();
});
return false
$('a').click(function () {
// custom handling here
return false;
});
Есть ли существенная разница между этими двумя способами прекращения распространения события?
Для меня return false;
проще, короче и, вероятно, меньше подвержен ошибкам, чем выполнение метода. С помощью этого метода вы должны помнить о правильном корпусе, скобках и т.д.
Кроме того, я должен определить первый параметр в обратном вызове, чтобы иметь возможность вызвать метод. Возможно, есть несколько причин, почему я должен избегать этого и использовать preventDefault
вместо этого? Какой лучший способ?
return false
из обработчика события jQuery фактически является тем же самым, что и вызов e.preventDefault
и e.stopPropagation
в переданном объекте jQuery.Event.
e.preventDefault()
предотвратит возникновение события по умолчанию, e.stopPropagation()
предотвратит разбухание события и return false
сделает оба. Обратите внимание, что это поведение отличается от обычных (не jQuery) обработчиков событий, в которых, в частности, return false
не останавливает событие от пузырьков.
Источник: John Resig
Любая польза от использования event.preventDefault() над "return false" для отмены клика href?
return false
из обработчика DOM2 ( addEventListener
) вообще ничего не делает (ни предотвращает дефолт, ни останавливает пузырьки; из обработчика Microsoft DOM2-ish ( attachEvent
) он предотвращает дефолтный, но не пузырьковый режим; из обработчика DOM0 ( onclick="return ..."
), он предотвращает использование по умолчанию (при условии, что вы return
в атрибут), но не всплывает; из обработчика событий jQuery это делает и то, и другое, потому что это jQuery. Подробности и живые тесты здесь
По моему опыту, существует хотя бы одно явное преимущество при использовании функции event.preventDefault() с использованием return false. Предположим, вы захватили событие click на теге привязки, иначе это было бы большой проблемой, если бы пользователь должен был перейти от текущей страницы. Если ваш обработчик кликов использует return false, чтобы предотвратить навигацию браузера, он открывает возможность того, что интерпретатор не достигнет оператора return, и браузер продолжит выполнение поведения по умолчанию для якорных тегов.
$('a').click(function (e) {
// custom handling here
// oops...runtime error...where oh where will the href take me?
return false;
});
Преимущество использования event.preventDefault() заключается в том, что вы можете добавить это как первую строку в обработчике, тем самым гарантируя, что поведение по умолчанию по умолчанию не будет срабатывать, независимо от того, не будет ли достигнута последняя строка функции (например,.).
$('a').click(function (e) {
e.preventDefault();
// custom handling here
// oops...runtime error, but at least the user isn't navigated away.
});
Это не так, как вы его назвали, вопрос "JavaScript"; это вопрос о дизайне jQuery.
jQuery и ранее связанная цитата от John Resig (karim79 сообщение), по-видимому, является источником непонимания того, как обработчики событий в целом работают.
Факт: обработчик событий, который возвращает false, предотвращает действие по умолчанию для этого события. Это не останавливает распространение события. Обработчики событий всегда работали таким образом, начиная с старых дней Netscape Navigator.
Документация из MDN объясняет, как return false
в обработчике событий работает
Что происходит в jQuery, это не то же самое, что происходит с обработчиками событий. Слушатели событий DOM и "прикрепленные" события MSIE - это совсем другое дело.
Для дальнейшего чтения см. attachEvent в MSDN и W3C DOM 2 Документация по событиям.
Как правило, ваш первый вариант (preventDefault()
) - это тот, который нужно взять, но вы должны знать, в каком контексте вы находитесь и каковы ваши цели.
Fuel Your Coding имеет отличную статью в return false;
vs event.preventDefault()
vs event.stopPropagation()
vs event.stopImmediatePropagation()
.
ПРИМЕЧАНИЕ. В приведенной выше ссылке "Топливо вашего кодирования" уже довольно долгое время производится ошибка 5xx. Я нашел его копию в Интернет-архиве, распечатал его в формате PDF и поместил в Dropbox: Архивированная статья в return false;
vs event.preventDefault()
vs event.stopPropagation()
vs event.stopImmediatePropagation()
(PDF)
При использовании jQuery return false
выполняет 3 отдельные операции, когда вы вызываете это:
event.preventDefault();
event.stopPropagation();
См. jQuery Events: Stop (Mis) Использование Return False для получения дополнительной информации и примеров.
Вы можете повесить множество функций в событие onClick
для одного элемента. Как вы можете быть уверены, что false
будет последним? preventDefault
, с другой стороны, определенно предотвратит только поведение элемента по умолчанию.
Я думаю,
event.preventDefault()
- это w3c указанный способ отмены событий.
Вы можете прочитать это в спецификации W3C на Отмена события.
Также вы не можете использовать return false в каждой ситуации. При предоставлении функции javascript в атрибуте href и при возврате false, пользователь будет перенаправлен на страницу с ложной строкой.
<a href="javascript:return false"
или с чем-то еще?
Я думаю, что лучший способ сделать это - использовать event.preventDefault()
потому что, если в обработчике event.preventDefault()
какое-то исключение, тогда возвращаемое false
утверждение будет пропущено, а поведение будет противоположно тому, что вы хотите.
Но если вы уверены, что код не будет вызывать каких-либо исключений, вы можете пойти с любым из методов, которые вы хотите.
Если вы все еще хотите перейти с возвратом false
, тогда вы можете поместить весь код обработчика в блок catch try, как показано ниже:
$('a').click(function (e) {
try{
your code here.........
}
catch(e){}
return false;
});
В принципе, таким образом вы комбинируете вещи, потому что jQuery - это структура, которая в основном фокусируется на элементах HTML, в основном предотвращая дефолт, но в то же время вы прекращаете распространение на пузырь.
Таким образом, мы можем просто сказать, что возврат false в jQuery
равен:
return false is e.preventDefault И e.stopPropagation
Но также не забывайте об этом в функциях, связанных с jQuery или DOM, когда вы запускаете его на элементе, в основном он предотвращает все, начиная с обжига, включая поведение по умолчанию и распространение события.
В основном перед началом использования return false;
, сначала поймите, что такое e.preventDefault();
и e.stopPropagation();
сделайте, тогда, если вы считаете, что вам нужны оба одновременно, просто используйте его.
Итак, в основном этот код ниже:
$('div').click(function () {
return false;
});
равен этому коду:
$('div').click(function (event) {
event.preventDefault();
event.stopPropagation();
});
e.preventDefault();
Он просто останавливает действие элемента по умолчанию.
Экземпляр Ex.:-
запрещает гиперссылку следовать URL-адресу, не позволяет отправить кнопку отправки формы. Когда у вас много обработчиков событий, и вы просто хотите предотвратить событие по умолчанию из-за этого, и из-за этого много раз, для этого нам нужно использовать в верхней части функции().
Причина: -
Причина использования e.preventDefault();
заключается в том, что в нашем коде так что-то не получается в коде, тогда он позволит выполнить ссылку или форму для отправки или разрешить выполнение или разрешить любые действия, которые вам нужно выполнить. & link или submit будет отправлена и все еще позволит продолжить распространение события.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
<script type="text/javascript">
function doSomethingElse(){
console.log("This is Test...");
}
$("a").click(function(e){
e.preventDefault();
});
</script>
</body>
</html>
return False;
Он просто останавливает выполнение функции().
" return false;
", завершит полное выполнение процесса.
Причина: -
Причина использования return false; заключается в том, что вы больше не хотите выполнять функцию в строго режиме.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="#" onclick="returnFalse();">Blah</a>
<script type="text/javascript">
function returnFalse(){
console.log("returns false without location redirection....")
return false;
location.href = "http://www.google.com/";
}
</script>
</body>
</html>
Основное различие между return false
и event.preventDefault()
заключается в том, что ваш код ниже return false
не будет выполнен, а в случае event.preventDefault()
ваш код будет выполняться после этого утверждения.
Когда вы пишете return false, вы делаете следующие вещи за кулисами.
* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
Разница между preventDefault() и возвращает false следующим образом:
preventDefault(): он просто останавливает поведение браузеров по умолчанию.
return false: он делает 3 отдельных объекта, когда вы его вызываете:
Использует согласно вашему требованию:
1) Если вы хотите просто запретить поведение браузера по умолчанию, используйте функцию preventDefault().
2) Если вы хотите предотвратить поведение браузера по умолчанию и предотвратить распространение события DOM, используйте return false.
Мое мнение по моему опыту говорит, что всегда лучше использовать
event.preventDefault()
Практически для остановки или предотвращения отправки события, когда требуется, а не return false
event.preventDefault()
отлично работает.
preventDefault
не мешает другим левшей от исполнения. Для этого и используетсяstopImmediatePropagation
.