Tabs click events are handled at capture phase

[romaricpascal]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

As a blanket way to intercept and prevent click events from triggering certain actions after editing some form fields, I'm trying to use events capture phase to intercept them as early as possible and "cancel" them.

However, in the case of Bootstrap tabs, Bootstrap's EventHandler seems to attach its listener on document, for the capture phase, preventing to do anything earlier:

The addEventListener call receives a 3rd delegation parameter, turned to true by normalizeParameters because the Tab's setup code passes the selector to the toggles.

Using the show.bs.tab does allow to prevent the switching but requires to handle things differently for tabs than clicks on other buttons/links, which I'd be keen to avoid if I could. And unfortunately, I can't register my listener on window to intercept the event earlier.

Would there be a way for EventHandler not to use the capture phase (I'm guessing there's a reason it's here, though)? This would give more room for the page's code to intercept an manipulate events before Bootstrap handles them.

Reduced test cases

On the tabs documentation, running the following script in the console does not prevent clicks on the tabs in the example from switching:

document.addEventListener('click', e => {console.log('Preventing'), e.preventDefault();e.stopImmediatePropagation();}, true)

Running it on the window does, given the capture would happen there before Bootstrap's listener.

window.addEventListener('click', e => {console.log('Preventing'), e.preventDefault();e.stopImmediatePropagation();}, true)

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

5.1, 5.0