Event: Make trigger(focus/blur/click) work with native handlers #5228
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
timmywil
approved these changes
Mar 27, 2023
1146aeb to
e6b67bf
Compare
In `leverageNative`, instead of calling `event.stopImmediatePropagation()` which would abort both native & jQuery handlers, set the wrapper's `isImmediatePropagationStopped` property to a function returning `true`. Since for each element + type pair jQuery attaches only one native handler, there is also only one wrapper jQuery event so this achieves the goal: on the target element jQuery handlers don't fire but native ones do. Unfortunately, this workaround doesn't work for handlers on ancestors - since the native event is re-wrapped by a jQuery one on each level of the propagation, the only way to stop it for jQuery was to stop it for everyone via native `stopPropagation()`. This is not a problem for `focus`/`blur` which don't bubble, but it does also stop `click` on checkboxes and radios. We accept this limitation. Fixes jquerygh-5015
e6b67bf to
771a2bd
Compare
mgol
added a commit
that referenced
this pull request
Mar 27, 2023
In `leverageNative`, instead of calling `event.stopImmediatePropagation()` which would abort both native & jQuery handlers, set the wrapper's `isImmediatePropagationStopped` property to a function returning `true`. Since for each element + type pair jQuery attaches only one native handler, there is also only one wrapper jQuery event so this achieves the goal: on the target element jQuery handlers don't fire but native ones do. Unfortunately, this workaround doesn't work for handlers on ancestors - since the native event is re-wrapped by a jQuery one on each level of the propagation, the only way to stop it for jQuery was to stop it for everyone via native `stopPropagation()`. This is not a problem for `focus`/`blur` which don't bubble, but it does also stop `click` on checkboxes and radios. We accept this limitation. Fixes gh-5015 Closes gh-5228 (cherry picked from commit 6ad3651)
Member
Author
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
In
leverageNative, instead of callingevent.stopImmediatePropagation()which would abort both native & jQuery handlers, set the wrapper'sisImmediatePropagationStoppedproperty to a function returningtrue. Since for each element + type pair jQuery attaches only one native handler, there is also only one wrapper jQuery event so this achieves the goal: on the target element jQuery handlers don't fire but native ones do.Unfortunately, this workaround doesn't work for handlers on ancestors - since the native event is re-wrapped by a jQuery one on each level of the propagation, the only way to stop it for jQuery was to stop it for everyone via native
stopPropagation(). This is not a problem forfocus/blurwhich don't bubble, but it does also stopclickon checkboxes and radios. We accept this limitation.Fixes gh-5015
+7 bytes
All three added tests fail before the source changes in Chrome & IE 11 and pass with the source changes.
Checklist
If needed, a docs issue/PR was created at https://github.com/jquery/api.jquery.com