[HTML 5] stopPropagation & stopImmediatePropagation

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

const app = document.getElementById('app'); app.innerHTML = `   <h1>JavaScript DOM</h1>   <div class="one">     <div class="two">       <button type="button" class="three">         Click Me       </button>     </div>   </div> `;   const one = document.querySelector('.one'); const two = document.querySelector('.two'); const three = document.querySelector('.three');   function handleClick(event) {   event.stopPropagation();   // event.stopImmediatePropagation();   console.log(event.target); }   one.addEventListener('click', handleClick); two.addEventListener('click', handleClick); three.addEventListener('click', handleClick);   three.addEventListener('click', event => console.log(event), { capture: true });

　　

When use 'stopPropagation', the code:

three.addEventListener('click', event => console.log(event), { capture: true });

will still running.

 

But when use 'stopImmediatePropagtion', that line of code will not run any more