0

Any way to differentiate between touch and click? "Why on earth would you want to?" Always someone that thinks they know every possible use case, so to you:

We have a muti-tiered drop down nav menu. If a user is on a regular laptop with a mouse, then menus drop down on: onmouseover. However if they click a first-tier item, we'd like them to go direct to a page. So the problems comes in when the user in on a laptop with touch capability. In this case, the touch is considered both a click and a mouseover. So the user would see the menus drop down, before being taken direct to the page hooked up in the first tier, or menu headers. They'd never be able to select a 2nd or 3rd tier menu item.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Y.K.
  • 290
  • 2
  • 9
  • So looking for something like: if(touched){show sub-menus} else if (clicked) {go direct to page} – Y.K. Oct 13 '18 at 14:04

1 Answers1

0

What you can do then, is to detect if the user is on a tablet/smartphone or on a laptop before declaring your events and afterwhat, you add the right event regarding on the device.

You can detect the devise by using a regex on the userAgent string witch contain data on the user browser and can be reached from the navigator API => navigator.userAgent

See this web site to get regex you need: http://detectmobilebrowsers.com/

Or you can also use an external library like mobile-detect.js.

Math
  • 38
  • 1
  • 1
  • 7
  • That won't work on laptop with touch, which is the main issue in the question. We've covered all other scenarios. – Y.K. Oct 13 '18 at 16:21
  • I'm sorry, I missunderstood. Have you tried then to use preventDefault on the event object sent in the touch function ? `element.touchstart = function(event) {event.preventDefault(); //open dropdown}` – Math Oct 13 '18 at 16:36
  • Yeah, that could be an option, but is apparently too slow for google's speed checks on scroll performance. https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners – Y.K. Oct 13 '18 at 17:06