/Html/Stopimmediatepropagation vs stoppropagation

Stopimmediatepropagation vs stoppropagation

<!---- stopImmediatePropagation() vs stopPropagation() ----------------->

`stopPropagation` allows other event handlers on the SAME ELEMENT 
on the SAME EVENT to be executed, while `stopImmediatePropagation`
prevents this.

<script>
el.addEventListener( "click", e => e.stopImmediatePropagation() )
el.addEventListener( "click", e => console.log("This will not run.") )
</script>

<!----------------- stopImmediatePropagation() vs stopPropagation() ---->

<!-- index.html -->

<div id="credit">Procrastination for Dummies</div> 
Copy code
JAVASCRIPT
/* script.js */

const credit = document.querySelector("#credit");

credit.addEventListener("click", function(event) {
  console.log("Nah, I'll do it later");
});

credit.addEventListener("click", function(event) {
  console.log("I WILL do it tomorrow");
  event.stopImmediatePropagation();
});

credit.addEventListener("click", function(event) {
  console.log("Why do I have so much work piled up?!");
});

/* Clicking on the div block will print to the console:

  Nah, I'll do it later
  I WILL do it tomorrow

*/

Source: practicum.yandex.com

Similar codes

2 votes158 views1 answer
Htlm link
Html
0 vote159 views1 answer
Footer html stack overflow
Html
0 vote230 views1 answer
Crear select jsp java
Html
69 votes176 views6 answers
Html link
Html
38 votes176 views5 answers
Disable button in html
Html
14 votes152 views6 answers
Html date input
Html
70 votes159 views4 answers
Html form
Html
2 votes155 views2 answers
Toggle button
Html
91 votes168 views6 answers
Open link in a new tab
Html
1 vote177 views1 answer
Bootstrap select box arrow not visible
Html