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замість цього? Який кращий спосіб?

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

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

Джерело: Джон Резиг

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

З мого досвіду, принаймні одна явна перевага при використанні event.preventDefault () над використанням return false. Припустимо, ви фіксуєте подію натискання на якорний тег, інакше це буде великою проблемою, якщо користувач повинен переходити подалі від поточної сторінки. Якщо обробник натискань використовує функцію 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.
});

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

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

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

Документація від MDN пояснює , як return falseв обробник подій працює

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

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

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

Паливо Ваш Coding має велику статтю про return false;проти event.preventDefault()проти event.stopPropagation()протиevent.stopImmediatePropagation() .

Коли ви використовуєте jQuery, return falseвиконуючи 3 окремі речі, коли ви його називаєте:

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

Див. Події jQuery: Стоп (Міс) Використання Return False для отримання додаткової інформації та прикладів.

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

я думаю

event.preventDefault()

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

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

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

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

Але якщо ви впевнені, що код не спричинить жодних винятків, тоді ви можете скористатися будь-яким із бажаних методів.

Якщо ви все ще хочете йти з поверненням false, тоді ви можете помістити весь код обробника в блок спробу лову, як показано нижче:

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

Моя думка з мого досвіду говорить про те, що завжди краще використовувати

event.preventDefault() 

Практично для припинення або запобігання надсилання події, коли нам потрібно, а не return false event.preventDefault()добре.

Основна відмінність між return falseі в event.preventDefault()тому, що ваш код нижче return falseне буде виконаний і вevent.preventDefault() випадку, якщо ваш код буде після цього твердження.

Коли ви пишете повернення помилкового, він робить для вас наступні речі поза кадром.

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

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>

В основному, таким чином ви комбінуєте речі, тому що jQuery - це рамка, яка в основному зосереджена на елементах HTML, ви в основному запобігаєте замовчуванню, але в той же час ви припиняєте розповсюдження, щоб переповнюватися.

Тож ми можемо просто сказати, що повернення false у jQueryдорівнює:

return 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();
});

З мого досвіду event.stopPropagation () використовується в основному в CSS-ефекті або анімаційних роботах, наприклад, коли у вас є ефект наведення як для елемента картки, так і для кнопки, коли вказівник наводить на кнопку, і в цьому випадку ефект наведення курсора та кнопки буде викликаний. , ви можете використовувати event.stopPropagation () припинити дії бульбашок, а event.preventDefault () призначений для запобігання поведінки браузера за замовчуванням. Наприклад, у вас є форма, але ви визначили лише подію клацання для дії надсилання, якщо користувач подає форму натисканням клавіші Enter, браузер, що викликається подією клавіші, а не подія клацання тут, ви повинні використовувати event.preventDefault (), щоб уникнути невідповідності поведінка. Я не знаю, що за чорт повертається помилково; Вибачте.Для додаткових роз'яснень перейдіть за цим посиланням та пограйте з рядком №33https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv