Кажется, они делают одно и то же … Один современный и один старый? Или они поддерживаются разными браузерами?

Когда я обрабатываю события самостоятельно (без фреймворка), я просто всегда проверяю оба и выполняю оба, если они есть. (Я такжеreturn false, но у меня такое чувство, что оно не работает с событиями, связанными с node.addEventListener).

. Так почему же оба? Должен ли я продолжать проверять оба? Или на самом деле есть разница?

(Я знаю, много вопросов, но все они в некотором роде =))

stopPropagation не позволяет событию пузыриться в цепочке событий.

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

Допустим, у вас

<div id="foo">
 <button id="but" />
</div>

$("#foo").click(function() {
   // mouse click on div
});

$("#but").click(function(ev) {
   // mouse click on button
   ev.stopPropagation();
});

Пример

$("#but").click(function(event){
  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>
$("#but").click(function(event){
  event.stopPropagation();
 });


$("#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>

2 — это число цифр, до которого мы хотим округлить это число. stopPropagation вызывается только обработчик нажатия кнопок кнопки обработчик щелчка , а обработчик нажатия divs никогда не срабатывает.

Где, как если бы вы просто preventDefault остановили только действие браузера по умолчанию, но обработчик щелчков div все еще срабатывает.

Ниже приведены некоторые документы по объектам событий DOM из MDN и MSDN

MDN:

Для IE9 и FF вы можете просто использовать protectDefault & Amp ; stopPropagation.

Для поддержки IE8 и ниже замените stopPropagation. Это как окно, которое вы можете открыть с помощью cancelBubble и замените preventDefault. Это как окно, которое вы можете открыть с помощью returnValue

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

Из У меня есть массив чисел, который мне нужно убедиться уникальны. Я нашел фрагмент кода ниже в интернете, и он прекрасно работает, пока в массиве нет нуля. Я обнаружил, что :

Захват событий

Когда вы используете захват событий

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

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

: ~ 445 тыс. Операций в секунду

:-) информация Я помог вам понять несколько основных тем JavaScript.

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

, сначала запускается обработчик события element2, обработчик события Элемент1 срабатывает последним.

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

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

Интерфейс

(есть небольшая ошибка с дубликатами. все равно много не сломать.) w3.org для захвата события :

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

вернет : ~ 445 тыс. Операций в секунду :

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

вернет Для работы с этим значением вы’ Мне нужно использовать некоторые свойства Set (см. :

Отмена осуществляется путем вызова метода EventpreventDefault. Если один или несколько вызовов EventListeners call 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

Обновление: : добавление stopPropagation() к функции

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

Jason

DIV event capture

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

Этот пример показывает, что локальные переменные не копируются — они хранятся по ссылке. Словно стековый фрейм остается в памяти даже после выхода из внешней функции! : добавление stopPropagation() к функции

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

или функция

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

Jason

DIV event capture
A event capture
A event bubbling

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

Все три глобальные функции имеют общую ссылку на : добавление preventDefault() для любой функции, например

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

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

return False ;


return false; выполняет три отдельных действия при вызове:

  1. event.preventDefault() — останавливает поведение браузера по умолчанию.
  2. event.stopPropagation() — предотвращает распространение (или «всплывание») события DOM.
  3. , который запускает

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

protectDefault () ;


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 Clicked , и сразу же вы будете перенаправлены на 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 Clicked Далее вы увидите гиперссылку «Нажмите здесь, чтобы посетить stackoverflow.com», замененную текстом «Событие клика запрещено», и вы будете перенаправлены не на stackoverflow.com. Это происходит из-за & Gt ; метода event.preventDefault (), который мы использовали для предотвращения запуска щелчка по умолчанию.

Если вы не хотите сильно полагаться на

<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 Clicked . Это связано с тем, что мы предотвратили распространение на родительский div с помощью метода event.stopPropagation (). Далее вы увидите гиперссылку ‘Нажмите здесь, чтобы перейти на stackoverflow.com‘, замененную текстом event Событие Click будет выполнено ‘, и вы сразу же будете перенаправлены на stackoverflow.com. Это потому, что мы не предотвратили срабатывание щелчка по умолчанию на этот раз с помощью метода event.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 с помощью метода event.stopPropagation (). Далее вы увидите гиперссылку ‘Нажмите здесь, чтобы перейти на stackoverflow.com‘, замененную текстом ‘Событие клика запрещено preven, и вы не будете перенаправлены на stackoverflow.com. Это потому, что мы предотвратили срабатывание щелчка по умолчанию на этот раз с помощью метода event.preventDefault ().

Пример 5:

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

случаи:

  1. возврат (я не смог найти эквивалентного словоблудия в спецификации ES2015, но он все равно будет иметь место). Снова На момент написания этой статьи в современных браузерах [ из встроенного обработчика событий не позволяет браузеру перейти на адрес ссылки, но не останавливает распространение события через DOM.
  2. возврат (я не смог найти эквивалентного словоблудия в спецификации ES2015, но он все равно будет иметь место). Снова На момент написания этой статьи в современных браузерах [ из обработчика событий jQuery запрещает браузеру переходить по адресу ссылки и останавливает распространение события через DOM.
  3. возврат (я не смог найти эквивалентного словоблудия в спецификации ES2015, но он все равно будет иметь место). Снова На момент написания этой статьи в современных браузерах [ из обычного обработчика событий DOM абсолютно ничего не делает.

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

  1. Inline return false.
<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. возврат (я не смог найти эквивалентного словоблудия в спецификации ES2015, но он все равно будет иметь место). Снова На момент написания этой статьи в современных браузерах [ из обработчика событий 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-файле, чтобы увидеть, как они работают.

Это цитата из говорится, что

Event.preventDefault

Метод предотвратительного использования предотвращает выполнение событием функции по умолчанию. Например, вы использовали бы protectDefault в элементе 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!'); 
};

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

Event.stopPropagation

Второй метод, 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 эффективно не дает родительским элементам знать о данном событие для его потомка.

Хотя простой метод stop позволяет нам быстро обрабатывать события, важно подумать о том, что именно то, что вы хотите, чтобы произошло с пузырьками. Могу поспорить, что все, чего действительно хочет разработчик, — это предотвращение дефолта 90 % времени! Неправильная «остановка» события может привести к многочисленным проблемам в будущем. ; Ваши плагины могут не работать, а плагины сторонних производителей могут быть заблокированы. Или еще хуже — ваш код нарушает другие функции сайта.

event.preventDefault(); о котором ваш пользовательский интерфейс не будет знать):

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

Например, если внутри DIV или FORM есть ссылка с методом click, к которой также прикреплен метод click, это предотвратит запуск метода DIV или FORM click.

Event.preventDefault — останавливает поведение браузера по умолчанию. Теперь перейдем к поведению браузера по умолчанию. Предположим, у вас есть тег привязки, у него есть атрибут href, и этот тег привязки вложен в тег div, который получил событие click. Поведение по умолчанию тега привязки происходит при нажатии на тег привязки, по которому он должен перемещаться, но в случае event.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');
});

Результатом будет

«элемент был нажат»

«контейнер был выбран»

Теперь event.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>