Event.preventDefault() vs. return false

Ответ 1

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?

Ответ 2

По моему опыту, существует хотя бы одно явное преимущество при использовании функции 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.
});

Ответ 3

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

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

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

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

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

Я думаю

event.preventDefault()

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

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

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

Ответ 8

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

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

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

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

Ответ 9

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

event.preventDefault() 

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

Ответ 10

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

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

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

Ответ 11

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>

Ответ 12

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

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

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

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

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

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

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

Ответ 13

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

Ответ 14

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