event.preventDefault () против возврата false

Question

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

Answer 1

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

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

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

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

Answer 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.
});

Answer 3

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

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

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

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

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

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

Answer 4

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

Топливо Ваша кодировка имеет отличную статью о return false; против event.preventDefault() против event.stopPropagation() против event.stopImmediatePropagation().

Answer 5

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

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

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

Answer 6

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

Answer 7

Я думаю

event.preventDefault()

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

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

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

Answer 8

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

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

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

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

Answer 9

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>

Answer 10

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

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

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