🔰capturing phase

handlers registered on container elements have the oppertunity to intercept events before they are delivered to their actual target.

// capturing handler, same as {capture: true}
container.addEventListener("click", capturingHandler, true);

// ⭐️ prevent touch screen default actions.
container.addEventListener("touchmove", 
    event => { event.preventDefault() },     
    {passive: false}        // ⭐️ important
);

⭐️ 重點

The optional third argument to addEventListener() is a boolean value or object. If you pass true, then the handler is registered as a capturing event handler.

If you want to remove a capturing event handler, you must also pass true as the third argument to removeEventListener().

⚠️ event.target's capturing handlers are NOT invoked❗️

capturing handlers can be used:

• for debugging

• to filter events so that the target event handlers are never actually invoked.

• for handling mouse drags.

👥 相關

• touch event - use {passive: false} to prevent touch screen default actions.

• default action

🗣 討論

• How to prevent default handling of touch events?