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)