Вопрос: event.preventDefault () vs. return 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вместо? Какой лучший способ?


2614


источник


Ответы:


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

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

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

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


2573



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

390



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

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

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

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

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

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


89



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

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

ЗАМЕТКА: Топливо вашего кодирования ссылка выше, производила ошибки 5xx в течение довольно долгого времени. Я нашел его копию в Интернет-архив , напечатал его в формате PDF и поместил в Dropbox: Архивировано статья о return false;против event.preventDefault()против event.stopPropagation()против event.stopImmediatePropagation() (PDF)


58



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

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

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


51



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


37



я думаю

event.preventDefault()

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

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

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


17



I think the best way to do this is to use event.preventDefault() because if some exception is raised in the handler, then the return false statement will be skipped and the behavior will be opposite to what you want.

But if you are sure that the code won't trigger any exceptions, then you can go with any of the method you wish.

If you still want to go with the return false, then you can put your entire handler code in a try catch block like below:

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

13