event.preventDefault() против возврата false
Когда я хочу предотвратить выполнение других обработчиков событий после того, как определенное событие запущено, я могу использовать один из двух методов. Я буду использовать jQuery в примерах, но это относится и к plain-JS:
1. event.preventDefault()
$('a').click(function (e) {
// custom handling here
e.preventDefault();
});
2. return false
$('a').click(function () {
// custom handling here
return false;
});
Есть ли существенная разница между этими двумя методами остановки распространения событий?
Для меня, return false; Проще, короче и, вероятно, менее подвержен ошибкам, чем выполнение метода. При использовании этого метода вы должны помнить о правильном регистре, скобках и т. Д.
Кроме того, я должен определить первый параметр в обратном вызове, чтобы иметь возможность вызывать метод. Возможно, есть несколько причин, почему я должен избегать делать это так и использовать preventDefault вместо? Какой способ лучше?
15 ответов
return false изнутри обработчик событий jQuery фактически совпадает с вызовом обоих e.preventDefault а также e.stopPropagation на переданном объекте jQuery.Event.
e.preventDefault() предотвратит событие по умолчанию, e.stopPropagation() предотвратит всплеск события и return false сделаю оба. Обратите внимание, что это поведение отличается от обычных (не jQuery) обработчиков событий, в которых, в частности, return false не останавливает всплывание события.
Источник: Джон Резиг
По моему опыту, при использовании 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 и ранее связанная цитата Джона Резига (в сообщении karim79), похоже, являются источником неправильного понимания того, как вообще работают обработчики событий.
Факт: обработчик события, который возвращает false, предотвращает действие по умолчанию для этого события. Это не останавливает распространение события. Обработчики событий всегда работали таким образом, начиная с давних времен Netscape Navigator.
Документация от MDN объясняет, как return false в обработчике событий работает
То, что происходит в jQuery, отличается от того, что происходит с обработчиками событий. Слушатели событий DOM и "прикрепленные" события MSIE - это совсем другое дело.
Для получения дополнительной информации см. AttachEvent на MSDN и документацию W3C DOM 2 Events.
Вообщем ваш первый вариант (preventDefault()), но вы должны знать, в каком контексте вы находитесь и каковы ваши цели.
Fuel Your Coding имеет отличную статью о return false; против event.preventDefault() против event.stopPropagation() против event.stopImmediatePropagation(),
ПРИМЕЧАНИЕ. Ссылка Fuel Your Coding выше выдает ошибки 5xx уже довольно давно. Я нашел его копию в интернет-архиве, распечатал в PDF и поместил в Dropbox: return false; против event.preventDefault() против event.stopPropagation() против 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, пользователь будет перенаправлен на страницу с записанной ложной строкой.
Я думаю, что лучший способ сделать это - использовать event.preventDefault() потому что если в обработчике возникает какое-то исключение, то возвращаемое false Заявление будет пропущено, а поведение будет противоположным тому, что вы хотите.
Но если вы уверены, что код не будет вызывать каких-либо исключений, вы можете использовать любой метод, который пожелаете.
Если вы все еще хотите пойти с возвращением false, затем вы можете поместить весь код вашего обработчика в блок try catch, как показано ниже:
$('a').click(function (e) {
try{
your code here.........
}
catch(e){}
return false;
});
Основное различие между return false а также event.preventDefault() это твой код ниже return false не будет выполнен и в event.preventDefault() случае ваш код будет выполняться после этого заявления.
Когда вы пишете return false, он делает за вас следующие вещи.
* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
Предотвратить дефолт
Вызов preventDefault() на любом этапе потока событий отменяет событие, а это означает, что любое действие по умолчанию, обычно предпринимаемое реализацией в результате события, не произойдет. Вы можете использовать событие.
вернуть ложь
return false внутри обратного вызова предотвращает поведение по умолчанию. Например, в событии отправки форма не отправляется. return false также прекращает всплывать, поэтому родители элемента не узнают, что произошло событие. возврат false эквивалентен event.preventDefault() + event.stopPropagation()
По сути, таким образом вы комбинируете вещи, потому что jQuery - это фреймворк, который в основном фокусируется на HTML-элементах, вы в основном предотвращаете использование по умолчанию, но в то же время вы останавливаете распространение, чтобы всплыть.
Таким образом, мы можем просто сказать, вернуть ложь в jQuery равно:
вернуть false - это e.preventDefault AND 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(); в том, что в нашем коде что-то идет не так в коде, тогда это позволит выполнить ссылку или форму для отправки или позволить выполнить или разрешить любое действие, которое вам нужно сделать. & ссылка или кнопка отправки будут отправлены и по-прежнему позволяют дальнейшее распространение события.
<!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; в том, что вы больше не хотите выполнять функцию в строгом режиме.
<!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>По моему опыту, event.stopPropagation() в основном используется в эффекте CSS или анимации, например, когда у вас есть эффект наведения как для элемента карты, так и для элемента кнопки, при наведении курсора на кнопку в этом случае срабатывает эффект наведения как карты, так и кнопок, вы можете использовать event.stopPropagation() для остановки всплывающих действий, а event.preventDefault() - для предотвращения поведения действий браузера по умолчанию. Например, у вас есть форма, но вы определили только событие щелчка для действия отправки, если пользователь отправляет форму, нажимая клавишу ввода, браузер запускается событием нажатия клавиши, а не событием щелчка, здесь вы должны использовать event.preventDefault(), чтобы избежать несоответствия поведение. Я не знаю, что такое return false; извините. Для получения дополнительных разъяснений перейдите по этой ссылке и поэкспериментируйте со строкой №33. https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv
Мое мнение из моего опыта говорит, что это всегда лучше использовать
event.preventDefault()
Практически, чтобы остановить или предотвратить отправку события, когда нам требуется, а не return falseevent.preventDefault() работает отлично.
и различные способы предотвратить событие по умолчанию.
Например, когда пользователь нажимает на внешнюю ссылку, мы должны отобразить модальное окно подтверждения, которое спрашивает пользователя о перенаправлении на внешний веб-сайт или нет:
hyperlink.addEventListener('click', function (e) {
// Don't redirect the user to the link
e.preventDefault();
});
Или мы не хотим отправлять форму при нажатии кнопки отправки. Вместо этого мы хотим сначала проверить форму:
submitButton.addEventListener('click', function (e) {
// Don't submit the form when clicking a submit
e.preventDefault();
});
Отличия
- не влияет на поведение по умолчанию, если вы используете
addEventListenerспособ обработки события. Это работает только тогда, когда обработчик события объявлен как атрибут элемента:
hyperlink.addEventListener('click', function (e) {
// Does NOT work
return false;
});
// Work
hyperlink.onclick = function (e) {
return false;
};
- Согласно
HTML 5спецификации, отменит событие, за исключениемmouseoverсобытие.
Передовая практика
Рекомендуется использовать метод, а не внутри обработчика событий. Поскольку последний работает только с использованием
onclickатрибут, который удалит другие обработчики того же события.Если вы используете jQuery для управления событиями, вы можете использовать в обработчике событий:
$(element).on('click', function (e) {
return false;
});
Прежде чем вернуть значение false, обработчик сделает что-то еще. Проблема в том, что если в обработчике возникает какая-либо ошибка времени выполнения, мы не дойдем до оператора return false в конце.
В этом случае будет принято поведение по умолчанию:
$(element).on('click', function (e) {
// Do something here, but if there's an error at runtime
// ...
return false;
});
Мы можем избежать этой ситуации, используяpreventDefaultперед выполнением любого пользовательского обработчика:
$(element).on('click', function (e) {
e.preventDefault();
// Do something here
// The default behavior is prevented regardless of errors at runtime
// ...
});
Хорошо знать
Если вы используете jQuery для управления событием, тоreturn falseбудет вести себя так же, какpreventDefault()иstopPropagation()методы:
$(element).on('click', function (e) {
// Prevent the default event from happening and
// prevent the event from bubbling up to the parent element
return false;
});