терминология

от quirksmode.org:

захват событие

при использовании захвата событий

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

обработчик событий element1 срабатывает первым, обработчик событий element2 срабатывает последним.

пузырящееся событие

при использовании события bubbling

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

сначала срабатывает обработчик событий element2, затем срабатывает обработчик событий element1 последний.

любое событие, происходящее в модели событий W3C, сначала захватывается, пока не достигнет целевого элемента, а затем снова всплывает.

                 | |  / \
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2    \ /  | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

интерфейс

от w3.org, ибо захват событие:

если захват EventListener желает предотвратить дальнейшую обработку событие от возникновения он может вызвать stopPropagation метод Event интерфейс. Это предотвратит дальнейшую отправку события, хотя дополнительные EventListeners зарегистрирован в той же иерархии уровень все равно получит событие. Как только событие stopPropagation метод был вызван, дальнейшие вызовы этого метода не имеют дополнительный эффект. Если дополнительных захватчиков не существует и stopPropagation не был вызван, событие вызывает уместно EventListeners на самой мишени.

на пузырящееся событие:

любой обработчик событий может решить предотвратить дальнейшее распространение событий вызываю stopPropagation метод Event интерфейс. При наличии таковых EventListener вызывает этот метод, все дополнительные EventListeners на ток EventTarget будет вызвано, но пузырение прекратится на этом уровень. Только один звонок в stopPropagation требуется для предотвращения дальнейшего пузырящийся.

на событие отмены:

отмена осуществляется путем вызова элемент Event ' s preventDefault метод. Если один или несколько EventListeners вызов preventDefault в ходе любая фаза потока событий действие по умолчанию будет отменено.

примеры

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

HTML:

<div id="a">
  <a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>
<p id="c"></p>

JavaScript:

var el = document.getElementById("c");

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
}

function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
}

function bubblingOnClick1(ev) {
    el.innerHTML += "DIV event bubbling<br>";
}

function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
}

// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);

Пример 1: это приводит к выходу

DIV event capture
A event capture
A event bubbling
DIV event bubbling

Пример 2 добавление stopPropagation() функции

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.stopPropagation();
}

результат

DIV event capture

прослушиватель событий предотвратил дальнейшее нисходящее и восходящее распространение события. Однако это не помешало действию по умолчанию (новая вкладка открытие.)

Пример 3 добавление stopPropagation() функции

function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
    ev.stopPropagation();
}

или

function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
    ev.stopPropagation();
}

результат

DIV event capture
A event capture
A event bubbling

это связано с тем, что оба прослушивателя событий зарегистрированы на одной цели события. Слушатели события предотвратили дальнейшее восходящее распространение события. Однако они не предотвратили действие по умолчанию (открытие новой вкладки).

Пример 4: добавление preventDefault() для любой функции, например

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.preventDefault();
}

предотвращает открытие новой вкладки.

return false;

---

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='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    alert('Link Clicked');
  }

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

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

Пример 2:

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

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

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

Пример 3:

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.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 нажал эта пора. Это связано с тем, что мы предотвратили распространение до Родительский div с помощью события.метод stopPropagation (). Далее вы увидите гиперссылка 'Нажмите здесь, чтобы посетить stackoverflow.com' заменено по тексту 'Click событие будет выполнено‘ и сразу же вы будете перенаправлено на stackoverflow.com это потому, что мы не помешали действие щелчка по умолчанию от запуска на этот раз с помощью событие.метод preventDefault ().

Пример 4:

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.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 с помощью событие.метод stopPropagation (). Далее вы увидите ссылку нажмите здесь, чтобы посетить stackoverflow.com 'заменено на текст' нажмите событие предотвращено‘ и вы не будете перенаправлены на stackoverflow.com. это это потому, что мы предотвратили запуск действия щелчка по умолчанию на этот раз с помощью события.метод preventDefault ().

Пример 5:

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

случаях:

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

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

1. встроенный обратный ложный.

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='return false'>Click here to visit stackoverflow.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>

1. возвращение ложные из обработчика событий jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href='https://stackoverflow.com'>Click here to visit stackoverflow.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>

1. возврат false из обычного обработчика событий DOM.

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

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

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

Это цитата из здесь

событие.preventDefault

метод preventDefault предотвращает выполнение события по умолчанию. Например, вы можете использовать preventDefault для элемента A, чтобы остановить щелчок этого элемента от выхода из текущей страницы:

//clicking the link will *not* allow the user to leave the page 
myChildElement.onclick = function(e) { 
    e.preventDefault(); 
    console.log('brick me!'); 
};

//clicking the parent node will run the following console statement because event propagation occurs
logo.parentNode.onclick = function(e) { 
    console.log('you bricked my child!'); 
};

в то время как функциональность элемента по умолчанию заложена кирпичом, событие продолжает пузыриться ДОМ.

событие.это происходит

второй метод, stopPropagation, позволяет выполнять функции события по умолчанию, но предотвращает распространение события:

//clicking the element will allow the default action to occur but propagation will be stopped...
myChildElement.onclick = function(e) { 
    e.stopPropagation();
    console.log('prop stop! no bubbles!'); 
};

//since propagation was stopped by the child element's onClick, this message will never be seen!
myChildElement.parentNode.onclick = function(e) { 
    console.log('you will never see this message!'); 
};

stopPropagation эффективно останавливает родительские элементы от знания о данном событии на его потомке.

в то время как простой метод остановки позволяет нам быстро обрабатывать события, это важно думать о том, что именно вы хотите, чтобы произошло с пузырящийся. Я бы поспорил, что все, что разработчик действительно хочет, это предотвратить дефолт 90% времени! Неправильно "остановив" событие может привести к вам многочисленные проблемы вниз по линии; ваши плагины могут не работать и ваш сторонние плагины могут быть замурованы. Или еще хуже-ваш код нарушает другие функциональные возможности на сайте.

event.preventDefault(); останавливает действие элемента по умолчанию.

event.stopPropagation(); предотвращает всплывание события в дереве DOM, не позволяя родительским обработчикам получать уведомления о событии.

например, если есть ссылка с методом click, прикрепленным внутри DIV или FORM что также имеет метод щелчка прилагается, это предотвратит DIV или FORM выберите метод от стрельбы.

событие.preventDefault-останавливает поведение браузера по умолчанию. Теперь приходит то, что поведение браузера по умолчанию. Предположим, у вас есть тег привязки, и у него есть атрибут href, и этот тег привязки вложен в тег div, у которого есть событие click. Поведение по умолчанию тега привязки-это при нажатии на тег привязки, который он должен перемещаться, но какое событие.preventDefault делает это останавливает навигацию в этом случае. Но это никогда не останавливает бурление события или эскалацию события я.е

<div class="container">
 <a href="#" class="element">Click Me!</a>
</div>

$('.container').on('click', function(e) {
 console.log('container was clicked');
});

$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  console.log('element was clicked');
});

результат будет

"элемент был нажат"

"контейнер был нажат"

сейчас события.StopPropation он останавливает пузырение события или эскалацию события. Теперь с приведенным выше примером

$('.container').on('click', function(e) {
  console.log('container was clicked');
});

$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  e.stopPropagation(); // Now the event won't bubble up
 console.log('element was clicked');
});

результат будет

"элемент был нажат"

для получения дополнительной информации см. Эту ссылку https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/

$("#but").click(function(event){
console.log("hello");
  event.preventDefault();
 });


$("#foo").click(function(){
 alert("parent click event fired !");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>