event.preventDefault() vs. return false

2462
голосов

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

10 ответов

2480
голосов

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?

ответ дан karim79 31 авг. '09 в 15:05
источник
378
голосов

По моему опыту, существует хотя бы одно явное преимущество при использовании функции 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.
});
ответ дан Jeff Poulton 23 янв. '11 в 1:37
источник
86
голосов

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

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

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

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

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

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

ответ дан Garrett 21 июня '10 в 0:31
источник
56
голосов

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

Fuel Your Coding имеет отличную статью в 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)

>
ответ дан JAAulde 09 апр. '11 в 21:32
источник
47
голосов

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

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

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

ответ дан James Drinkard 19 февр. '13 в 18:54
источник
34
голосов

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

ответ дан Eldar Djafarov 31 авг. '09 в 15:02
источник
18
голосов

Я думаю,

event.preventDefault()

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

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

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

ответ дан rahul 31 авг. '09 в 15:04
источник
11
голосов

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

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

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

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
ответ дан Naga Srinu Kapusetti 09 марта '13 в 22:27
источник
0
голосов

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

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

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

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

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

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

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

ответ дан GSB 02 дек. '17 в 22:18
-1
голос

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

event.preventDefault() 

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

ответ дан Dilip0165 29 сент. '14 в 14:28
источник

Другие вопросы по меткам