Event.preventDefault() vs. return 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 вместо этого? Какой лучший способ?

2661
задан RaYell 31 авг. '09 в 14:58
источник поделиться
13 ответов

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?

2609
ответ дан karim79 31 авг. '09 в 15:05
источник поделиться

По моему опыту, существует хотя бы одно явное преимущество при использовании функции 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.
});
393
ответ дан Jeff Poulton 23 янв. '11 в 1:37
источник поделиться

Это не так, как вы его назвали, вопрос "JavaScript"; это вопрос о дизайне jQuery.

jQuery и ранее связанная цитата от John Resig (karim79 сообщение), по-видимому, является источником непонимания того, как обработчики событий в целом работают.

Факт: обработчик событий, который возвращает false, предотвращает действие по умолчанию для этого события. Это не останавливает распространение события. Обработчики событий всегда работали таким образом, начиная с старых дней Netscape Navigator.

Документация из MDN объясняет, как return false в обработчике событий работает

Что происходит в jQuery, это не то же самое, что происходит с обработчиками событий. Слушатели событий DOM и "прикрепленные" события MSIE - это совсем другое дело.

Для дальнейшего чтения см. attachEvent в MSDN и W3C DOM 2 Документация по событиям.

89
ответ дан Garrett 21 июня '10 в 0:31
источник поделиться

Как правило, ваш первый вариант (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)

>
58
ответ дан JAAulde 09 апр. '11 в 21:32
источник поделиться

При использовании jQuery return false выполняет 3 отдельные операции, когда вы вызываете это:

  • event.preventDefault();
  • event.stopPropagation();
  • Остановка выполнения обратного вызова и возврат немедленно при вызове.

См. jQuery Events: Stop (Mis) Использование Return False для получения дополнительной информации и примеров.

51
ответ дан James Drinkard 19 февр. '13 в 18:54
источник поделиться

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

38
ответ дан Eldar Djafarov 31 авг. '09 в 15:02
источник поделиться

Я думаю,

event.preventDefault()

- это w3c указанный способ отмены событий.

Вы можете прочитать это в спецификации W3C на Отмена события.

Также вы не можете использовать return false в каждой ситуации. При предоставлении функции javascript в атрибуте href и при возврате false, пользователь будет перенаправлен на страницу с ложной строкой.

18
ответ дан rahul 31 авг. '09 в 15:04
источник поделиться

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

Но если вы уверены, что код не будет вызывать каких-либо исключений, вы можете пойти с любым из методов, которые вы хотите.

Если вы все еще хотите перейти с возвратом false, тогда вы можете поместить весь код обработчика в блок catch try, как показано ниже:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
13
ответ дан Naga Srinu Kapusetti 09 марта '13 в 22:27
источник поделиться

Разница между preventDefault() и возвращает false следующим образом:

preventDefault(): он просто останавливает поведение браузеров по умолчанию.

return false: он делает 3 отдельных объекта, когда вы его вызываете:

  • Он останавливает поведение браузеров по умолчанию.
  • Это предотвращает распространение события DOM.
  • Остановка выполнения обратного вызова и возврат немедленно при вызове.

Использует согласно вашему требованию:

1) Если вы хотите просто запретить поведение браузера по умолчанию, используйте функцию preventDefault().

2) Если вы хотите предотвратить поведение браузера по умолчанию и предотвратить распространение события DOM, используйте return false.

0
ответ дан GSB 02 дек. '17 в 22:18
поделиться

В принципе, таким образом вы комбинируете вещи, потому что 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();
});
0
ответ дан Alireza 18 июля '18 в 14:07
источник поделиться

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

Когда вы пишете return false, вы делаете следующие вещи за кулисами.

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
0
ответ дан Abdullah Shoaib 09 февр. '18 в 11:14
источник поделиться

Мое мнение по моему опыту говорит, что всегда лучше использовать

event.preventDefault() 

Практически       для остановки или предотвращения отправки события, когда требуется, а не return false event.preventDefault() отлично работает.

0
ответ дан Dilip0165 29 сент. '14 в 14:28
источник поделиться

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>
0
ответ дан Parth Raval 27 апр. '18 в 9:55
источник поделиться

Другие вопросы по меткам