-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tabs click events are handled at capture phase #36063
Comments
Describe the issueI stumbled upon this when dealing with the Collapse plugin. The collapse event handlers, too, are added with Reduced test case<section class="card">
<div class="card-header d-flex"
data-bs-toggle="collapse" data-bs-target="#collapse-target" aria-expanded="true"
style="cursor: pointer"
>
<h3 class="card-title"> Card Title </h3>
<button class="btn btn-danger btn-sm ms-auto" onclick="alert('This should not toggle the card')">
Click me
</button>
</div>
<div class="card-body">
<div id="collapse-target" class="collapse show">
Collapsed content
</div>
</div>
</section> https://jsfiddle.net/gehxa4s5/ What operating system(s) are you seeing the problem on?Windows 10 What browser(s) are you seeing the problem on?Chrome 108.0.5359.125 (Official Build) (64-Bit) What version of Bootstrap are you using?5.2 |
I'm running into exactly this same thing when migrating from Bootstrap 4 to 5, also in the context of trying to make sure that clicking buttons in a collapsible row doesn't also collapse it. I spent some time looking into this. There's at least one somewhat valid use case for handling events in the capture phase: the However, I'm inclined to say that things like that should be the exception, not the rule. That is: default to handle during bubbling, but judiciously use the capture phase when it's specifically necessary. |
Prerequisites
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 thecapture
phase, preventing to do anything earlier: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 onwindow
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:
Running it on the
window
does, given the capture would happen there before Bootstrap's listener.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
The text was updated successfully, but these errors were encountered: