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

2961

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

RaYell
источник
172
Обратите внимание , что Jquery - х preventDefaultэто не мешает другим левшей от исполнения. Вот для чего stopImmediatePropagation.
Crescent Fresh
19
@CrescentFresh, он предотвращает выполнение других (впоследствии связанных) обработчиков ... на узле DOM, на котором происходит событие. Это просто не мешает распространению.
век
37
Это не «два способа остановить распространение событий?» e.preventDefault (); предотвращает действие по умолчанию, не останавливает распространение события, что выполняется с помощью e.stopPropagation ().
Тимо Тихгоф
24
Этот вопрос и его ответы о jQuery. Если вы пришли сюда в поисках простого ответа на javascript, см. Event.preventDefault () против return false (без jQuery)
Oriol
5
В этом ответе есть таблица, объясняющая все это stackoverflow.com/a/5302939/759452
Adrien Be

Ответы:

2818

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

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

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

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

karim79
источник
126
return falseиз обработчика DOM2 ( addEventListener) вообще ничего не делает (ни предотвращает дефолт, ни останавливает пузырьки; из обработчика Microsoft DOM2-ish ( attachEvent) он предотвращает дефолт, но не пузырьки; из обработчика DOM0 ( onclick="return ...") он предотвращает дефолт (при условии вы включаете returnв атрибут), но не всплывает, из обработчика событий jQuery это делает и то, и другое, потому что это вещь jQuery. Подробности и живые тесты здесь
TJ Crowder
12
Было бы полезно определить «Распространение» и «По умолчанию» здесь. Я, например, постоянно путаю их. Это правильно? Распространение = мой код (обработчики событий JavaScript для родительских элементов). По умолчанию = код браузера (ссылки, выделение текста и т. Д.)
Боб Стейн
5
что на самом деле означает пузыриться? пример?
Говинда Сахаре
5
+1 За отметить , что return falseэто не остановить распространение события в обработчиках событий , не JQuery. т.е. <a href="#" onclick="return false">Test</a>никак не остановить событие от бурлит.
Дуг С
424

По моему опыту, при использовании 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.
});
Джефф Поултон
источник
68
Несмотря на то, что при прогрессивном улучшении часто предпочтительнее противоположное поведение (которое, я думаю, вероятно, является наиболее вероятной причиной переопределения действия по умолчанию)
meandmycode
Оба способа блокируют поведение события по умолчанию, это просто вопрос, какую проблему вы пытаетесь решить.
Ferkze
102

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

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

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

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

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

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

Garrett
источник
6
@rds Это говорит, что «protectDefault не останавливает дальнейшее распространение события через DOM. Для этого следует использовать event.stopPropagation».
Гарретт
В ответе на тесно связанный вопрос утверждается, что до HTML 5 возвращение false из обработчика событий не предусматривало никаких действий вообще. Теперь, может быть, это неверная интерпретация (трудно понять) спецификации, или, может быть, несмотря на то, что она не была задана буквально, все браузеры интерпретировали так return falseже, как event.preventDefault(). Но я не знаю; достаточно заставить меня взять это с щепоткой соли.
Марк Амери
9
Я ненавижу, что каждый результат поиска javascript в Google на самом деле о jQuery, +1
Александр Дерк
Он отметил это как JavaScript и jQuery, и оба они верны. jQueryэто просто подмножество JavaScript, а не его собственный язык.
ProfK
67

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

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

JAAulde
источник
@VisruthCV Смотрите мою добавленную заметку со ссылкой на
архивную
57

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

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

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

Джеймс Дринкард
источник
Если другие части кода прослушивают это событие, event.stopPropagation (); отменит их обратный звонок?
Ferkze
41

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

Эльдар Джафаров
источник
20

Я думаю

event.preventDefault()

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

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

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

Рахул
источник
4
Ни в одном браузере, который я когда-либо встречал. Возможно, вы путаете это с <a href="javascript:return false"чем-то?
mplungjan
10
-1; Утверждение, что href, который возвращает false, будет генерировать текстовую страницу со словом «false», написанным на ней, - полная чушь.
Марк Амери
1
(минус) 1; битая ссылка + полная ерунда
Фил
15

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

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

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

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
Нага Срину Капусетти
источник
1

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

event.preventDefault() 

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

Dilip0165
источник
11
Лучше почему? Вы буквально дали здесь нулевое оправдание. -1.
Марк Эмери
В случае, когда существует несколько привязок событий, e.preventDefault () более целенаправлен, чем возвращает false.
Тайгер
preventDefaultэто некоторые английские слова, я понимаю, что это "предотвращает дефолт". return falseэто некоторые английские слова, я понимаю, что это «возвращает ложь», но я понятия не имею, почему, пока я не Google Google этот загадочный код. И бонусом я могу управлять отдельно stopPropagationи preventDefault .
Джоан
1

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

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

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
Абдулла Шоаиб
источник
1

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>

Парт Равал
источник
1

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

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

Сатиш Шаджахан
источник