Detecting that the browser has no mouse and is touch-only

The main trouble is that you have the following different classes of devices/use cases:

1. Mouse and keyboad (desktop)
2. Touch only (phone/tablet)
3. Mouse, keyboard, and touch (touch laptops)
4. Touch and keyboard (bluetooth keyboard on tablet)
5. Mouse only (Disabled user/browsing preference)
6. Keyboard only (Disabled user/browsing preference)
7. Touch and mouse (ie hover events from Galaxy Note 2 pen)

What's worse, is that one can transition from some of these classes to others (plugs in a mouse, connects to keyboard), or a user may APPEAR to be on a normal laptop until they reach out and touch the screen.

You are correct in assuming that the presence of event constructors in the browser is not a good way to move forward (and it is somewhat inconsistent). Additionally, unless you are tracking a very specific event or only trying to rule out a few classes above, using events themselves isn't full proof.

For example, say you've discovered that a user have emitted a real mousemove (not the false one from touch events, see http://www.html5rocks.com/en/mobile/touchandmouse/).

Then what?

You enable hover styles? You add more buttons?

Either way you are increasing time to glass because you have to wait for an event to fire.

But then what happens when your noble user decides wants to unplug his mouse and go full touch.. do you wait for him to touch your now crammed interface, then change it right after he's made the effort to pinpoint your now crowded UI?

In bullet form, quoting stucox at https://github.com/Modernizr/Modernizr/issues/869#issuecomment-15264101

• We want to detect the presence of a mouse
• Ae probably can't detect before an event is fired
• As such, what we're detecting is if a mouse has been used in this session — it won't be immediately from page load
• We probably also can't detect that there isn't a mouse — it'd be undefined until true (I think this makes more sense than setting it false until proven)
• And we probably can't detect if a mouse is disconnected mid-session — that'll be indistinguishable from the user just giving up with their mouse

An aside: the browser DOES know when a user plugs in a mouse/connects to a keyboard, but doesn't expose it to JavaScript.. dang!

This should lead you to the following:

Tracking the current capabilities of a given user is complex, unreliable, and of dubious merit

The idea of progressive enhancement applies quite well here, though. Build an experience that works smoothly no matter the context of the user. Then make assumptions based on browser features/media queries to add functionality that will be relative in the assumed context. Presence of a mouse is just one of the multitudes of ways in which different users on different devices experience your website. Create something with merit at its kernel and don't worry too much about how people click the buttons.

As of 2018 there is a good and reliable way to detect if a browser has a mouse (or similar input device): CSS4 media interaction features which are now supported by almost any modern browser (except IE 11 and special mobile browsers).

W3C:

The pointer media feature is used to query the presence and accuracy of a pointing device such as a mouse.

See the following options:

    /* The primary input mechanism of the device includes a pointing device of limited accuracy. */    @media (pointer: coarse) { ... }    /* The primary input mechanism of the device includes an accurate pointing device. */    @media (pointer: fine) { ... }    /* The primary input mechanism of the device does not include a pointing device. */    @media (pointer: none) { ... }    /* Primary input mechanism system can        hover over elements with ease */    @media (hover: hover) { ... }    /* Primary input mechanism cannot hover        at all or cannot conveniently hover        (e.g., many mobile devices emulate hovering       when the user performs an inconvenient long tap),        or there is no primary pointing input mechanism */    @media (hover: none) { ... }    /* One or more available input mechanism(s)        can hover over elements with ease */    @media (any-hover: hover) { ... }    /* One or more available input mechanism(s) cannot        hover (or there are no pointing input mechanisms) */    @media (any-hover: none) { ... }

Media queries can also be used in JS:

if(window.matchMedia("(any-hover: none)").matches) {    // do sth}

Related:

W3 documentation: https://www.w3.org/TR/mediaqueries-4/#mf-interaction

Browser support: https://caniuse.com/#search=media%20features

Similar problem: Detect if a client device supports :hover and :focus states

How about listening for a mousemove event on the document. Then until you hear that event you assume that the device is touch or keyboard only.

var mouseDetected = false;function onMouseMove(e) {  unlisten('mousemove', onMouseMove, false);  mouseDetected = true;  // initializeMouseBehavior();}listen('mousemove', onMouseMove, false);

(Where listen and unlisten delegate to addEventListener or attachEvent as appropriate.)

Hopefully this wouldn't lead to too much visual jank, it would suck if you need massive re-layouts based on mode...