Fix unclickable submenus on touchscreen tablet#1983
Fix unclickable submenus on touchscreen tablet#1983bjohansebas merged 2 commits intoexpressjs:gh-pagesfrom
Conversation
✅ Deploy Preview for expressjscom-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
See the comment below.
I’d like to highlight that, by default, :hover events generally do not fire on touchscreen devices, as there's no concept of "hover" with touch — users either tap or don’t. This behavior is documented on MDN.
However, some hybrid devices (like the Microsoft Surface) may trigger hover events when using a mouse or trackpad — but not via touch.
To ensure consistent interactivity across all devices, we should either:
- reuse/modify the existing click event from menu.js for both desktop and mobile, or
- add support for touch events where needed.
Note: We doing redesign of top navigation bar, this issue will get removed there.
In addition to the tablet, hover events work on my Android phone using both Chrome and Firefox.
I finally found the listener on menu.js:23. Tomorrow, I will:
|
danielzgtg
force-pushed
the
fix/touchscreenNav
branch
2 times, most recently
from
efa0fb6 to
e5e8374
Compare
It works by cancelling the onclick URL change for the current (bold) parent menu item. This matches the mobile experience. Touchscreens can now tap a menu to go there (preserving current UX), tap again to open the submenu, then tap the submenu item. Previous behavior with mice is unchanged.
danielzgtg
force-pushed
the
fix/touchscreenNav
branch
from
e5e8374 to
cb61c08
Compare
ShubhamOulkar
left a comment
ShubhamOulkar
left a comment
There was a problem hiding this comment.
LGTM
🎉 awesome shout-out to @danielzgtg! 🙌
bjohansebas
left a comment
bjohansebas
left a comment
There was a problem hiding this comment.
I can't reproduce it, but if the error is fixed, it's fine by me. I don't have a tablet, and on the phone the size isn't enough to check it. The code looks fine.
LGTM
3 participants
Fixes: #1170
It works by cancelling the onclick URL change for the current (bold) parent menu item. This matches the mobile experience. Touchscreens can now tap a menu to go there (preserving current UX), tap again to open the submenu, then tap the submenu item. Previous behavior with mice is unchanged.
Before
After