If touch, else if click, else

Question

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.

Answer 1

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.