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

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

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

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

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

По моему опыту, при использовании 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.
});

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

JQuery и ранее связаны цитата из Джона Resig (в karim79 в сообщении ) , как представляется, является источником непонимания того , как обработчики событий в общей работе.

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

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

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

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

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

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

При использовании 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, пользователь будет перенаправлен на страницу с записанной ложной строкой.

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

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

Если вы все еще хотите использовать возврат 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();

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>

По сути, таким способом вы комбинируете вещи, потому что 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();
});

Из моего опыта 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