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

3116
RaYell 31 Авг 2009 в 15:58

13 ответов

Лучший ответ

return false из в обработчике событий jQuery фактически аналогичен вызову обоих e.preventDefault и e.stopPropagation для переданного jQuery.Event object.

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

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

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

2798
Leo 9 Сен 2016 в 15:47

По сути, таким образом вы комбинируете вещи, потому что 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
Alireza 18 Июл 2018 в 11:07

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

1
Sathish Shajahan 14 Май 2019 в 05:09

< Сильный > 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;» завершит все выполнение процесса.

Причина: -

Причина использования 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
Parth Raval 27 Апр 2018 в 06:55

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

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

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
1
Abdullah Shoaib 9 Фев 2018 в 08:14

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

event.preventDefault() 

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

1
ann 21 Авг 2015 в 06:10

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

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

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

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
14
dangom 17 Янв 2018 в 15:30

Я думаю

event.preventDefault()

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

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

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

19
user66001 31 Мар 2014 в 00:39

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

40
user66001 31 Мар 2014 в 00:36

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

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

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

56
Salman von Abbas 3 Окт 2016 в 18:13

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

Топливное кодирование имеет отличный false / "rel =" nofollow noreferrer "> статья о return false; против event.preventDefault() против event.stopPropagation() против event.stopImmediatePropagation() .

64
JosefAssad 4 Янв 2019 в 18:07

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

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

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

документация от MDN объясняет, как { {X0}} в обработчике событий работает

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

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

99
Community 23 Май 2017 в 12:26

По моему опыту, при использовании 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.
});
420
Jeff Poulton 22 Янв 2011 в 22:37