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вместо этого? Какой способ лучше?

Обратите внимание , что Jquery - х preventDefaultэто не мешает другим левшей от исполнения. Вот для чего stopImmediatePropagation.
Crescent Fresh 31.08.2009 12:22:13
@CrescentFresh, он предотвращает выполнение других (впоследствии связанных) обработчиков ... на узле DOM, на котором происходит событие. Это просто не мешает распространению.
eyelidlessness 17.10.2011 02:51:49
Это не «два способа остановить распространение событий?» e.preventDefault (); предотвращает действие по умолчанию, не останавливает распространение события, что выполняется с помощью e.stopPropagation ().
Timo Tijhof 9.01.2012 01:44:55
Этот вопрос и его ответы о jQuery. Если вы пришли сюда в поисках простого ответа на javascript, смотрите event.preventDefault () против return false (без jQuery)
Oriol 28.09.2013 21:23:13
В этом ответе есть таблица, объясняющая все это stackoverflow.com/a/5302939/759452
Adrien Be 16.04.2014 07:20:40
13 ОТВЕТОВ
РЕШЕНИЕ

return falseиз обработчика событий JQuery фактически то же самое , как вызов , как e.preventDefaultи e.stopPropagationна пройденный объект jQuery.Event.

e.preventDefault()предотвратит возникновение события по умолчанию, e.stopPropagation()предотвратит всплытие события и return falseвыполнит оба действия. Обратите внимание , что это поведение отличается от нормальных (не JQuery) обработчиков событий, в которых, в частности, return falseникак не остановить событие от бурлит.

Источник: Джон Резиг

Есть ли какая-либо польза от использования event.preventDefault () по сравнению с «return false» для отмены href клика?

2804
9.09.2016 15:47:47
return falseиз обработчика DOM2 ( addEventListener) вообще ничего не делает (ни предотвращает дефолт, ни останавливает всплывающее окно; из обработчика Microsoft DOM2-ish ( attachEvent) он предотвращает дефолтное значение, но не всплывает; из обработчика DOM0 ( onclick="return ...") он предотвращает значение по умолчанию (при условии вы включаете returnв атрибут), но не всплывает, из обработчика событий jQuery это делает и то и другое, потому что это вещь jQuery. Подробности и живые тесты здесь
T.J. Crowder 30.11.2011 13:09:51
Было бы полезно определить «Распространение» и «По умолчанию» здесь. Я, например, постоянно путаю их. Это правильно? Распространение = мой код (обработчики событий JavaScript для родительских элементов). По умолчанию = код браузера (ссылки, выделение текста и т. Д.)
Bob Stein 28.07.2013 14:49:59
что на самом деле означает пузыриться? пример?
Govinda Sakhare 17.08.2016 10:59:01
+1 за то, что return falseон не останавливает распространение событий в обработчиках событий не-jQuery. т.е. <a href="#" onclick="return false">Test</a>никак не остановить событие от бурлит.
Doug S 21.08.2016 02:42:40

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

40
31.03.2014 00:36:30

Я думаю

event.preventDefault()

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

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

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

19
31.03.2014 00:39:39
Ни в одном браузере, который я когда-либо встречал. Возможно, вы путаете это с <a href="javascript:return false"чем-то?
mplungjan 15.02.2012 12:53:09
-1; Утверждение, что href, который возвращает false, сгенерирует текстовую страницу со словом «false», написанным на ней, - полная чушь.
Mark Amery 23.01.2016 23:10:47
(минус) 1; битая ссылка + полная ерунда
Phil 6.11.2017 16:01:43

Как вы уже назвали, это не вопрос «JavaScript»; это вопрос относительно дизайна jQuery.

jQuery и ранее связанная цитата от Джона Резигасообщении karim79 ), похоже, являются источником неправильного понимания того, как вообще работают обработчики событий.

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

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

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

Для получения дополнительной информации см. AttachEvent на MSDN и документацию W3C DOM 2 Events .

100
23.05.2017 12:26:38
@rds Это говорит: «protectDefault не останавливает дальнейшее распространение события через DOM. Для этого следует использовать event.stopPropagation».
Garrett 24.07.2011 23:40:02
В ответе на тесно связанный вопрос утверждается, что до HTML 5 возвращение false из обработчика событий не рассматривалось как выполнение каких- либо действий вообще. Теперь, может быть, это неверная интерпретация (трудно понять) спецификации, или, может быть, несмотря на то, что она не была задана буквально, все браузеры интерпретировали так return falseже, как event.preventDefault(). Но я не знаю; достаточно заставить меня взять это с щепоткой соли.
Mark Amery 24.01.2016 00:13:43
Я ненавижу, что каждый результат поиска javascript в Google на самом деле о jQuery, +1
Alexander Derck 11.10.2016 21:26:02
Он отметил это как JavaScript и jQuery, и оба они верны. jQueryэто просто подмножество JavaScript, а не его собственный язык.
ProfK 28.01.2020 05:26:45

По моему опыту, при использовании 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.
});
422
22.01.2011 22:37:09
Несмотря на то, что при прогрессивном улучшении часто предпочтительнее противоположное поведение (которое, я думаю, вероятно, является наиболее вероятной причиной переопределения действия по умолчанию)
meandmycode 27.04.2012 22:53:23
Оба способа блокируют поведение события по умолчанию, это просто вопрос, какую проблему вы пытаетесь решить.
Ferkze 3.02.2020 21:00:45

Как правило, вы выбираете первый вариант ( preventDefault()), но вы должны знать, в каком контексте вы находитесь, и каковы ваши цели.

Fuel Your Coding имеет отличную статью о return false;против event.preventDefault()и event.stopPropagation()противevent.stopImmediatePropagation() .

65
4.01.2019 18:07:22
@VisruthCV Смотрите мою добавленную заметку со ссылкой на
JAAulde 2.08.2017 15:44:54

При использовании JQuery, return falseделают 3 отдельных вещей , когда вы называете это:

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

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

56
3.10.2016 18:13:14
Если другие части кода прослушивают это событие, event.stopPropagation (); отменит их обратный звонок?
Ferkze 3.02.2020 21:02:37

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

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

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

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
14
17.01.2018 15:30:34

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

event.preventDefault() 

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

1
21.08.2015 06:10:30
Лучше почему? Вы буквально дали здесь нулевое оправдание. -1.
Mark Amery 23.01.2016 23:07:38
В случае, когда существует несколько привязок событий, e.preventDefault () более целенаправлен, чем возвращает false.
Taiger 22.08.2017 22:50:23
preventDefaultэто некоторые английские слова, я понимаю, что это "предотвращает дефолт". return falseэто некоторые английские слова, я понимаю, что это «возвращает ложь», но я понятия не имею, почему, пока я не Google Google этот загадочный код. И бонусом я могу управлять отдельно stopPropagationи preventDefault .
Joan 28.03.2018 17:25:54

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

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

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
1
9.02.2018 08:14:22

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>

1
27.04.2018 06:55:06

По сути, таким образом вы комбинируете вещи, потому что jQuery - это фреймворк, который в основном фокусируется на HTML-элементах, вы в основном предотвращаете использование по умолчанию, но в то же время вы останавливаете распространение, чтобы всплыть.

Таким образом, мы можем просто сказать, что возвращаемое значение false 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();
});
0
18.07.2018 11:07:57

Из моего опыта event.stopPropagation () в основном используется в эффектах CSS или анимационных работах, например, когда у вас есть эффект наведения как для карты, так и для элемента кнопки, когда вы наводите курсор на кнопку, в этом случае сработает эффект наведения карты и кнопок. , вы можете использовать event.stopPropagation (), чтобы прекратить всплывать действия, а event.preventDefault () предназначен для предотвращения поведения по умолчанию действий браузера. Например, у вас есть форма, но вы только определили событие щелчка для действия отправки, если пользователь отправляет форму нажатием клавиши ввода, браузер запускается по событию нажатия клавиши, а не событие щелчка здесь, вы должны использовать event.preventDefault (), чтобы избежать неуместного поведение. Я не знаю, что, черт возьми, вернуть ложь; Извините. Для получения дополнительной информации перейдите по этой ссылке и поиграйте с линией № 33https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

1
14.05.2019 05:09:45