Does stopPropgation stop the event from propagating in the capture phase?

Question

I was looking at http://www.quirksmode.org/js/events_order.html and it is ambiguous in this part:

In the Microsoft model you must set the event’s cancelBubble property to true.

window.event.cancelBubble = true

In the W3C model you must call the event’s stopPropagation() method.

e.stopPropagation()

This stops all propagation of the event in the bubbling phase.

So my question is:

• When an event listener is set to listen in the capture phase, does it automatically not continue propagating to the inner elements?
• Or if it does continue propagating, does calling e.stopPropagation() stop it, or does that only work for the bubble phase?

Answer 1

Short answer: The order is:

1. Capture (down)
2. Target
3. Bubble (up).

If you call e.stopPropagation() in the capture phase (by setting the addEventListener()'s 3rd argument to true), it stops at 1, so 2 & 3 cannot receive it.

If you call e.stopPropagation() in the bubble phase (by setting the addEventListener()'s 3rd argument to false or just not assign it), the 1 & 2 already complete, so it just prevents the event from bubbling up from the level where you call stopPropagation().

Answer 2

No, an event listener doesn't stop any events from propagating, unless you explicitly tell it to. The part you're referring to deals with the bubble phase specifically. IE's model doesn't support event capturing - full stop. the capture phase is what precedes the bubbling phase:

Top of the DOM --->event--->traverses--->to--->[target]+[event]-| (capture phase)
      /\                                                       \/
      |------------------------to--------back up-----------------  (bubble up)

Answer 3

A concise answer is :
Whether it is a capturing phase or bubbling phase, DOM propagation is stopped on the first encounter of e.stopPropagation().

So in case 1 you have these elements on DOM:

el1.addEventListener('click', doSomething1, true);
el2.addEventListener('click', doSomething2, true); // Listener calls `e.stopPropagation()`
el3.addEventListener('click', doSomething3, true);

Note: On HTML page structure, el3 is a direct child of el2. And el2 is a direct child of el1.

We presume doSomething2 listener calls e.stopPropagation().

Clicking el3, listeners run in order as:

1. CAPTURING PHASE: doSomething1 --> doSomething2 --> ❌ no any other listener is run(whether capturing or bubble phase) - so el3 listener is not run
   
2. BUBBLING PHASE: ❌ Not even reachable

And in in case 2 you have these elements on DOM:

el1.addEventListener('click', doSomething1, true);
el2.addEventListener('click', doSomething2, false); // Listener calls `e.stopPropagation()`
el3.addEventListener('click', doSomething3, true);

Clicking el3, listeners run in order as:

1. CAPTURING PHASE: doSomething1 --> doSomething3 (All capture phase listeners down the DOM tree upto the clicked el3 element have been run) - so el3 listener is run
   
2. BUBBLING PHASE: doSomething2 --> ❌ Any other bubble phase listener is not run

Answer 4

stopPropagation() will not stop the captured event handler from getting called. stopPropagation() will stop the bubbled event handler from getting called.

Jsfiddle

var outputDiv = document.getElementById('output');

function log(msg) {
  outputDiv.insertAdjacentHTML('afterend', msg + '<br>');
}

/////////////////////
//Bubbling listeners
/////////////////////
document.getElementById('row1').addEventListener('click', function(e) {
  log('Bubbling row1 listener called');
  e.stopPropagation();
}, false);

document.getElementById('row2').addEventListener('click', function(e) {
  log('Bubbling row2 listener called');
  //NO stopPropagation on this one.
}, false);

document.getElementById('table').addEventListener('click', function() {
  log('Bubbling table listener called');
}, false);


document.addEventListener('click', function() {
  log('Bubbling document listener called');
}, false);

/////////////////////
//Capturing listeners
/////////////////////
document.addEventListener('click', function() {
  log('Capturing document listener called');
}, true);

document.getElementById('table').addEventListener('click', function() {
  log('Capturing table listener called');
}, true);

#outputwrapper {
  border: 1px solid black;
  height: 300px;
  overflow: scroll;
}

<table id="table" border="1">
  <tbody>
    <tr>
      <td id="row1">
        This row has stopPropagation
      </td>
    </tr>
    <tr>
      <td id="row2">
        This row does not have stopPropagation
      </td>
    </tr>
  </tbody>
</table>
<br>Output
<br>
<div id="outputwrapper">
  <div id="output"></div>
</div>