событие.preventDefault () против 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 вместо? Как лучше?

12 ответов


return false с в обработчике событий jQuery фактически то же самое, что и вызов обоих e.preventDefault и e.stopPropagation на переданном С помощью jQuery.Объект события.

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

источник: Джон В Отставку

любое преимущество использования события.preventDefault () над "return false", чтобы отменить щелчок href?


по моему опыту, есть по крайней мере одно явное преимущество при использовании event.preventDefault () над использованием return false. Предположим, вы фиксируете событие click на теге anchor, иначе это будет большой проблемой, если пользователь будет удален от текущей страницы. Если обработчик click использует return false для предотвращения навигации браузера, это открывает возможность того, что интерпретатор не достигнет оператора return и браузер продолжит выполнение якоря поведение тега по умолчанию.

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

преимущество использования событий.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 и ранее связан цитата С Джон В Отставку (in karim79 это ) представляется недоразумением источник как обработчики событий в общей работе.

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

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

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

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


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

Топливного Кода имеет большое статью 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)


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

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

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


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


Я думаю

event.preventDefault()

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

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

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


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

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

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

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

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

event.preventDefault() 

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


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

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

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

Эл.метод 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>

вернуть 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>

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

поэтому мы можем просто сказать, вернуть false в jQuery равен:

return false - e.preventDefault и e.stopPropagation

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

в основном перед началом использования return false;, сначала понять, что e.preventDefault(); и e.stopPropagation(); do, то если вы думаете, что вам нужно оба в то же время, а затем просто использовать его.

Итак, в основном этот код ниже:

$('div').click(function () {
  return false;
});

is равной этот код:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});