event.preventDefault () против возврата false

2661

Когда я хочу, чтобы другие обработчики событий выполнялись после запуска определенного события, я могу использовать один из двух методов. Я буду использовать 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 вместо этого? Какой лучший способ?

  • 161
    Обратите внимание , что Jquery в preventDefault не мешает другим левшей от исполнения. Для этого и используется stopImmediatePropagation .
  • 16
    @CrescentFresh, он предотвращает выполнение других (впоследствии связанных) обработчиков ... на узле DOM, на котором происходит событие. Это просто не мешает распространению.
Показать ещё 6 комментариев
Теги:
javascript-events
event-handling
event-propagation

13 ответов

2479
Лучший ответ

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?

  • 116
    return false из обработчика DOM2 ( addEventListener ) вообще ничего не делает (ни предотвращает дефолт, ни останавливает пузырьки; из обработчика Microsoft DOM2-ish ( attachEvent ) он предотвращает дефолтный, но не пузырьковый режим; из обработчика DOM0 ( onclick="return ..." ), он предотвращает использование по умолчанию (при условии, что вы return в атрибут), но не всплывает; из обработчика событий jQuery это делает и то, и другое, потому что это jQuery. Подробности и живые тесты здесь
  • 10
    Было бы полезно определить «Распространение» и «По умолчанию» здесь. Я, например, путаю их. Это правильно? Распространение = мой код (обработчики событий JavaScript для родительских элементов). По умолчанию = код браузера (ссылки, выделение текста и т. Д.)
Показать ещё 2 комментария
374

По моему опыту, существует хотя бы одно явное преимущество при использовании функции 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.
});
  • 64
    Хотя это правда, противоположное поведение часто предпочтительнее при выполнении прогрессивного улучшения (которое, я думаю, вероятно, является наиболее вероятной причиной для отмены действия по умолчанию)
89

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

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

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

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

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

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

  • 6
    А как насчет developer.mozilla.org/en/DOM/event.preventDefault ?
  • 6
    @rds Это говорит, что «protectDefault не останавливает дальнейшее распространение события через DOM. Для этого следует использовать event.stopPropagation».
Показать ещё 2 комментария
56

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

>
  • 1
    Ссылка не работает, выдает ошибку 502.
  • 0
    @VisruthCV Смотрите мою добавленную заметку со ссылкой на версию архива
51

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

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

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

39

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

18

Я думаю,

event.preventDefault()

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

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

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

  • 3
    Ни в одном браузере, который я когда-либо встречал. Возможно, вы путаете это с <a href="javascript:return false" или с чем-то еще?
  • 9
    -1; Утверждение, что href, который возвращает false, сгенерирует текстовую страницу со словом «false», написанным на ней, - полная чушь.
Показать ещё 1 комментарий
13

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

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

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

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
0

В принципе, таким образом вы комбинируете вещи, потому что 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

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

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

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

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
0

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

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

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

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

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

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

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

0

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

event.preventDefault() 

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

  • 10
    Лучше почему? Вы буквально дали здесь нулевое оправдание. -1.
  • 0
    В случае, когда существует несколько привязок событий, e.preventDefault () более целенаправлен, чем возвращает false.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню