0

Situation:

Menu with submenues. The main menu is referencing different pages, the submenues is referencing sections on the page.

So the menu looks like this:

            .menu-link
                a(href="/") Homepage
                #homepage-submenu.submenu
                    .submenu-link 
                        a(href="/#section1") Section1
                    .submenu-link 
                        a(href="/#section2") Section2
            .menu-link
                a(href="/otherPage") Other Page
                #other-page-submenu.submenu
                    .submenu-link 
                        a(href="/#section1") Section1
                    .submenu-link 
                        a(href="/#section2") Section2

Now the submenues are initially collapsed. On Hover of the ".menu-link" the submenu is expanded and it works perfectly on any machine with a mouse at play.

Now in medium size screen devices with touchscreen there is a problem because I cannot use the hover event to initially show the menu. Also the size of the screen would provoke the desktop version of it to be shown.

So the first tap must expand the menu and suppress the click event, the second tap must activate the link to the page.

How can I generally distinguish a tap from a click? or How can I detect a mouse at play?

Initially I thought I could listen on the "touchstart" event. If there is any "touchstart" before the click event, then I would suppress it for the first time.

However it seems there are no "touchstart" events on chromium anymore neither on my laptop, nor on my tablet?! o.0! elfelef!!11!11!!11!!!!!

Next Idea was to check for any "mouseenter" or "mousemove" event - then I would know there is a mouse at play.^^

However those simulated click events seem to always produce such a "mousemove" and "mouseenter" before it is fired.

So now I am totally clueless how such a seemingly simple situation could be handled. I would assume that nearly everybody is affected as I would think these cases are very common so it is weird that somebody decided to leave out the touch events and actually the whole chromium project went through with it. I could not find any solution other than deprecated ones relying on the "touchstart", which is seemingly not existent on at least two touch devices (those I use for testing^^).

Lenny
  • 157
  • 1
  • 13
  • Something related, but years ago and perceived as a bug: https://stackoverflow.com/questions/50792027/touchmove-event-not-firing-on-google-chrome-for-android – Lenny Oct 28 '21 at 22:39

1 Answers1

0

I'm shocked - that really seems to be a that long-time bug now.

The fix is to add an event listener on the body for the "touchstart" event.

document.body.addEventListener("touchstart", () => return)

Now with the fix and the "touchstart" event firing you may distinguish the tap from the click by the presence of the "touchstart" event.

Lenny
  • 157
  • 1
  • 13