Javascript detecting wether or not user has a mouse

Question

This is not for design, I'm making a tutorial where I would either ask the user to tap or to click on things.

Right now I'm using:

("ontouchstart" in document.documentElement);

But this fails on laptops with a touchscreen.

Answer 1

You can use CSS media queries for that. To detect a mouse, your query would look like that:

@media (hover: hover) and (pointer: fine) {
    // 'hover' means a device that supports hovering
    // 'pointer: fine' means an accurate pointing device, as opposed to limited pointing device like touchscreen (where you would use 'coarse' value
}

Note that this query will detect touch pad as well but it will not detect smartphones, touchscreens, stylus-based screens or other controllers like Nintendo Wii, Microsoft Kinect.

To run the same query from JavaScript , you can use Window.matchMedia() :

if (matchMedia('(hover: hover) and (pointer: fine)').matches) {
  // You code
}