Когда использовать PreventDefault() vs Return false?

Question

Во-первых, в модели событий JavaScript вы столкнетесь с концепцией, называемой пузырением событий (которая создает событие для распространения от дочернего элемента к родительскому элементу). Чтобы избежать такого пузырящего эффекта, многие разработчики используют метод события, называемый stopPropagation( ), В качестве альтернативы разработчики начали использоватьreturn false Заявление о прекращении такого распространения. Теперь есть другая терминология под названиемpreventDefault( ), Как видно из названия, этот метод предотвращает любое поведение по умолчанию элемента для запуска. Наилучший вариант использования - запретить тегу привязки открывать ссылку.

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

Answer 1

вернуть ложь;

---

return false; делает 3 отдельные вещи, когда вы называете это:

1. event.preventDefault() - Он останавливает поведение браузера по умолчанию.
2. event.stopPropagation() - Он предотвращает распространение события (или "всплеск") DOM.
3. Останавливает выполнение обратного вызова и немедленно возвращается при вызове.

Обратите внимание, что это поведение отличается от обычных (не jQuery) обработчиков событий, в которых, в частности, return false не останавливает всплывание события.

preventDefault ();

---

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

Когда их использовать?

---

Мы знаем, что они делают, но когда их использовать? Просто это зависит от того, чего вы хотите достичь. использование preventDefault(); если вы хотите "просто" предотвратить поведение браузера по умолчанию. Используйте return false; когда вы хотите предотвратить поведение браузера по умолчанию и предотвратить распространение DOM события. В большинстве ситуаций, где вы бы использовали return false; что ты действительно хочешь preventDefault(),

Примеры:

---

Давайте попробуем разобраться с примерами:

Мы увидим чистый пример JAVASCRIPT

Пример 1:

<div onclick='executeParent()'>
  <a href='http://stackru.com' onclick='executeChild()'>Click here to visit stackru.com</a>
</div>
<script>
  function executeChild() {
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

Запустив приведенный выше код, вы увидите гиперссылку "Нажмите здесь, чтобы перейти на stackru.com". Теперь, если вы сначала нажмете на эту ссылку, вы получите предупреждение javascript. Ссылка нажата. Далее вы получите раздел предупреждений javascript, нажав кнопку мыши, и сразу же вы будете перенаправлены на stackru.com.

Пример 2:

<div onclick='executeParent()'>
  <a href='http://stackru.com' onclick='executeChild()'>Click here to visit stackru.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

Запустите приведенный выше код, и вы увидите гиперссылку "Нажмите здесь, чтобы перейти на stackru.com". Теперь, если вы сначала нажмете на эту ссылку, вы получите предупреждение javascript. Ссылка нажата. Далее появится уведомление о тревоге. Нажмите кнопку Далее. Далее вы увидите гиперссылку. Нажмите здесь, чтобы перейти на stackru.com ", замененный текстом" Событие Click предотвращено ", и вы не будете перенаправлены на stackru.com. Это связано с> методом event.preventDefault(), который мы использовали для предотвращения срабатывания щелчка по умолчанию.

Пример 3:

<div onclick='executeParent()'>
  <a href='http://stackru.com' onclick='executeChild()'>Click here to visit stackru.com</a>
</div>
<script>
  function executeChild() {
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

На этот раз, если вы нажмете на ссылку, функция executeParent() не будет вызываться, и вы не получите уведомление о нажатии JavaScript. Это связано с тем, что мы предотвратили распространение на родительский div с помощью метода event.stopPropagation(). Далее вы увидите гиперссылку "Нажмите здесь, чтобы посетить stackru.com", замененную текстом "Событие Click будет выполнено", и вы сразу же будете перенаправлены на stackru.com. Это потому, что мы не предотвратили срабатывание щелчка по умолчанию на этот раз с помощью метода event.preventDefault().

Пример 4:

<div onclick='executeParent()'>
  <a href='http://stackru.com' onclick='executeChild()'>Click here to visit stackru.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

Если вы нажмете на ссылку, функция executeParent() не будет вызвана, и вы не получите предупреждение javascript. Это связано с тем, что мы предотвратили распространение на родительский div с помощью метода event.stopPropagation(). Далее вы увидите гиперссылку "Нажмите здесь, чтобы посетить stackru.com", замененную текстом "Событие клика запрещено", и вы не будете перенаправлены на stackru.com. Это потому, что мы предотвратили срабатывание щелчка по умолчанию на этот раз с помощью метода event.preventDefault().

Пример 5:

Для возврата false у меня есть три примера, и все, кажется, делают одно и то же (просто возвращают false), но на самом деле результаты совершенно разные. Вот что на самом деле происходит в каждом из вышеперечисленных.

случаи:

1. Возврат false из встроенного обработчика событий предотвращает переход браузера по адресу ссылки, но не останавливает распространение события через DOM.
2. Возвращение false из обработчика событий jQuery не позволяет браузеру перейти на адрес ссылки и останавливает распространение события через DOM.
3. Возвращение false из обычного обработчика событий DOM абсолютно ничего не делает.

Увидим все три примера.

1. Встроенный возврат false.

<div onclick='executeParent()'>
  <a href='http://stackru.com' onclick='return false'>Click here to visit stackru.com</a>
</div>
<script>
  var link = document.querySelector('a');

  link.addEventListener('click', function() {
    event.currentTarget.innerHTML = 'Click event prevented using inline html'
    alert('Link Clicked');
  });


  function executeParent() {
    alert('Div Clicked');
  }
</script>

2. Возвращает false из обработчика событий jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href='http://stackru.com'>Click here to visit stackru.com</a>
</div>
<script>
  $('a').click(function(event) {
    alert('Link Clicked');
    $('a').text('Click event prevented using return FALSE');
    $('a').contents().unwrap();
    return false;
  });
  $('div').click(function(event) {
    alert('Div clicked');
  });
</script>

3. Возвращает false из обычного обработчика событий DOM.

<div onclick='executeParent()'>
  <a href='http://stackru.com' onclick='executeChild()'>Click here to visit stackru.com</a>
</div>
<script>
  function executeChild() {
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
    return false
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

Надеюсь, что эти примеры понятны. Попробуйте выполнить все эти примеры в html-файле, чтобы увидеть, как они работают.