Defect #39802
closed
Fix click event handling in mobile view after closing flyout menu
Added by salman mp almost 2 years ago.
Updated over 1 year ago.
Description
In the mobile view, after opening flyout menu, there is a javascript that prevents click event on #main element. After closing menu it must reset to normal bahaviour, but despite mentioned in Patch #30448#note-13: Remove wrapper2 and wrapper3 wrapping containers this is not patched yet.
Index: public/javascripts/responsive.js
<+>UTF-8
===================================================================
diff --git a/public/javascripts/responsive.js b/public/javascripts/responsive.js
--- a/public/javascripts/responsive.js (revision 41895:183d6d070b7e204d024b7f30fd0dac75ff60ef70)
+++ b/public/javascripts/responsive.js (revision 41895+:183d6d070b7e+)
@@ -11,7 +11,7 @@
function closeFlyout() {
$('html').removeClass('flyout-is-active');
- $('#wrapper').off('click');
+ $('#main').off('click');
}
Files
Better suggestion to prevent showing project select jump-box when flyout menu is showing.
Index: public/javascripts/responsive.js
===================================================================
diff --git a/public/javascripts/responsive.js b/public/javascripts/responsive.js
--- a/public/javascripts/responsive.js (revision 41895:183d6d070b7e204d024b7f30fd0dac75ff60ef70)
+++ b/public/javascripts/responsive.js (revision 41895+:183d6d070b7e+)
@@ -2,7 +2,7 @@
function openFlyout() {
$('html').addClass('flyout-is-active');
- $('#main').on('click', function(e){
+ $('#main, #header').on('click', function(e){
e.preventDefault();
e.stopPropagation();
closeFlyout();
@@ -11,7 +11,7 @@
function closeFlyout() {
$('html').removeClass('flyout-is-active');
- $('#wrapper').off('click');
+ $('#main, #header').off('click');
}
salman mp wrote:
In the mobile view, after opening flyout menu, there is a javascript that prevents click event on #main element. After closing menu it must reset to normal bahaviour, but despite mentioned in Patch #30448#note-13: Remove wrapper2 and wrapper3 wrapping containers this is not patched yet.
I've confirmed the issue you've pointed out. In the current code, as shown in the attached counting-of-click-event-function-calls.gif , the function added by openFlyout keeps accumulating.
Regarding #note-1, I agree it should be changed. When the flyout menu is open, opening the jump box doesn't fully display it and it doesn't function properly. Therefore, when clicking on #header, it's better to close the flyout menu rather than opening the jump box.
It is better to specify a namespace to avoid other event handlers being removed.
https://api.jquery.com/off/#:~:text=Unbind%20all%20delegated%20event%20handlers%20by%20their%20namespace
diff --git a/public/javascripts/responsive.js b/public/javascripts/responsive.js
index 9dc4db4e7..e5515dbac 100644
--- a/public/javascripts/responsive.js
+++ b/public/javascripts/responsive.js
@@ -19,7 +19,7 @@
function openFlyout() {
$('html').addClass('flyout-is-active');
- $('#main').on('click', function(e){
+ $('#main, #header').on('click.close-flyout', function(e){
e.preventDefault();
e.stopPropagation();
closeFlyout();
@@ -28,7 +28,7 @@ function openFlyout() {
function closeFlyout() {
$('html').removeClass('flyout-is-active');
- $('#wrapper').off('click');
+ $('#main, #header').off('click.close-flyout');
}
- Related to Patch #30448: Remove wrapper2 and wrapper3 wrapping containers added
- Target version set to 5.0.8
Setting the target version to 5.0.8.
- Subject changed from Preventing click event on mobile view after flyout menu open and then closed to Fix click event handling in mobile view after closing flyout menu
- Status changed from New to Resolved
- Assignee set to Go MAEDA
- Resolution set to Fixed
Committed the patch in r22670.
- Status changed from Resolved to Closed
Thank you for your contribution.
Also available in: Atom
PDF
Updated by 
Updated by 
Updated by 