Питання event.preventDefault () vs. return false


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


2652
2017-08-31 11:58


походження


Зауважте, що jQuery's preventDefault робить ні запобігти виконання інших дій. Ось що stopImmediatePropagation для. - Crescent Fresh
@ CrescentFresh, це забороняє іншим (згодом пов'язаним) обробникам виконувати ... у вузлі DOM подія звільняється. Це просто не заважає розповсюдженню. - eyelidlessness
Це не "два способи припинення поширення подій?" e.preventDefault (); перешкоджає дії за замовчуванням, це не припиняє поширення подій, що виконується за допомогою e.stopPropagation (). - Krinkle
Це питання та його відповіді стосовно jQuery. Якщо ви прийшли сюди, шукаючи просту відповідь на javascript, див event.preventDefault () проти return false (немає jQuery) - Oriol
preventDefault (), stopPropagation (), stopImmediatePropagation (), повернути false, всі ці 4 способи використовуються для скасування події або запобігання його прориву. деяка інформація тут: markupjavascript.blogspot.in/2013/10/... - Mandeep Pasbola


Відповіді:


return false від в обробнику події jQuery є фактично таким же, як і дзвінок обох e.preventDefault і e.stopPropagation на пройденому об'єкт jQuery.Event.

e.preventDefault() запобігає події за умовчанням, e.stopPropagation() буде запобігти появі цієї події return false буде робити обидва. Зауважте, що ця поведінка відрізняється від нормальний (не jQuery) обробники подій, в яких, зокрема, return false робить ні зупинити події від булькання.

Джерело: Джон Ресіг

Будь-яка користь від використання event.preventDefault () над "return false" для скасування href натисніть?


2601
2017-08-31 12:05



return false з обробника DOM2 (addEventListener) взагалі нічого не робить (не перешкоджає запущенню за умовчанням, а також зупиняє перемішування; з обробника DOM2-ish (attachEvent), він заважає за замовчуванням, але не перемішується; від обробника DOM0 (onclick="return ..."), він запобігає за замовчуванням (якщо ви включили return в атрибуті), але не булькає; з обробника подій jQuery, це робить обидва, тому що це справа jQuery. Деталі та живі тести тут - T.J. Crowder
Тут буде корисно визначити "розповсюдження" та "за замовчуванням". Я для одного продовжую заплутати їх. Це правильно? Розповсюдження = мій код (обробник подій JavaScript для батьківських елементів). За замовчуванням = код браузера (посилання, вибір тексту тощо) - Bob Stein
Що дійсно означають під час бульбашки? приклад? - Pablo Escobar
+1, щоб це помітити return false робить ні зупинити поширення події в не-jQuery обробників подій. тобто <a href="#" onclick="return false">Test</a> робить ні зупинити події від булькання. - Doug S


З мого досвіду, при використанні event.preventDefault () використовується принаймні одна явна перевага над використанням return false. Припустімо, ви захоплюєте подію кліків на тезі прив'язки, інакше це було б серйозною проблемою, якщо користувачеві довелося віддалятися від поточної сторінки. Якщо ваш обробник кліків використовує return false, щоб запобігти навігації веб-переглядачем, він відкриває можливість того, що інтерпретатор не отримає заявку на повернення, і браузер буде продовжувати виконувати за замовчуванням тег прив'язки.

$('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.
});

393
2018-01-22 22:37



Хоча істинно, протилежна поведінка часто підходить для прогресивного вдосконалення (що, на мою думку, є, мабуть, найбільш вірогідною причиною того, щоб бути перекрученою за замовчуванням) - meandmycode


Це не так, як ви його називали, це питання "JavaScript"; це питання щодо дизайну jQuery.

jQuery і раніше пов'язана цитата від Джон Ресіг (в karim79's  повідомлення), здається, є джерелом нерозуміння того, як обробники подій взагалі працюють.

Факт: обробник подій, який повертає помилку, заважає дії за замовчуванням для цієї події. Це не припиняє поширення подій. Обробники подій завжди працювали таким чином, починаючи зі старих днів Netscape Navigator.

The документація з MDN пояснює як return false в обробці події працює обробник

Те, що відбувається в jQuery, не те, що відбувається з обробниками подій. Слухачі подій DOM та "додані" події MSIE взагалі інше.

Для подальшого читання див attachEvent на MSDN і Документація про події W3C DOM 2.


89
2018-06-20 21:31



А як на рахунок developer.mozilla.org/en/DOM/event.preventDefault ? - rds
@rds Це говорить про те, що "preventDefault не зупиняє подальше поширення події через DOM. Потрібно використовувати event.stopPropagation". - Garrett
Ан відповісти на тісно пов'язаному питанні стверджує, що до HTML 5, повернення фальшивим з обробника події не було сплюснений як робити щось взагалі. Тепер, можливо, це неправильне тлумачення (важко зрозуміти) специфікації, або, можливо, незважаючи на те, що воно не розглядається буквально всі інтерпретовані браузери return false такий же як і event.preventDefault(). Але я не знаю; достатньо, щоб я зніміть це з щіпкою солі. - Mark Amery
Я ненавиджу, як кожний результат пошуку в javascript у google фактично про jQuery, +1 - Alexander Derck


Як правило, ваш перший варіант (preventDefault()) це той, який потрібно взяти, але ви повинні знати, в якому контексті ви знаходитесь і які цілі є.

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

ПРИМІТКА: The Паливо Ваше кодування Вказана вище посилання вже давно видає помилки 5xx. Я знайшов його копію в Інтернет-архів, надрукував його у форматі PDF і помістив його в Dropbox: Архівовано стаття про return false; проти event.preventDefault() проти event.stopPropagation() проти event.stopImmediatePropagation()  (PDF)


58
2018-04-09 18:32



Посилання посилання не працює, дається помилка 502. - Visruth
@VisruthCV Див мою додану нотатку з посиланням на архівну версію - JAAulde


При використанні jQuery return false робить 3 окремі речі, коли ви називаєте це:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. Зупиняє виконання зворотного виклику і негайно повертається, коли викликається.

Побачити Події jQuery: Зупинка (мінус) за допомогою повернення помилково для отримання додаткової інформації та прикладів.


51
2018-02-19 15:54





Ви можете повісити багато функцій на onClick подія для одного елемента. Як ви можете бути впевнені в тому, що false Один з них буде останньою, щоб вогнем? preventDefault з іншого боку, безумовно, запобігти лише поведінці за замовчуванням елемента.


38
2017-08-31 12:02





Я думаю

event.preventDefault()

це w3c вказаний спосіб скасування подій.

Ви можете прочитати це в специфікації W3C в Скасування подій.

Також ви не можете використовувати return false у кожній ситуації. Коли ви віддаєте функцію javascript у атрибуті href, і якщо ви повернете false, користувач буде переспрямований на сторінку з записаним ложним рядком.


18
2017-08-31 12:04



Не в якому браузері я коли-небудь зустрічався. Можливо, ви плутаєте це з <a href="javascript:return false" або щось? - mplungjan
-1; твердження про те, що href, який повертає false, створить текстову сторінку зі словом "false", написана на ній, є повна нісенітниця. - Mark Amery
(мінус) 1; розбите посилання + повна дурниця - Phil