javascript - How to detect if a device has mouse support?

Question

I currently use the following test (taken out of Modernizr) to detect touch support:

function is_touch_device() {
    var bool;
    if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
        bool = true;
    } else {
        injectElementWithStyles(['@media (',prefixes.join('touch-enabled),('),mod,')','{#modernizr{top:9px;position:absolute}}'].join(''), function(node) {
            bool = node.offsetTop === 9;
        });
    }
    return bool;
}

But some devices are both touch and mouse driven, so I want a seperate function to detect if a device has mouse support. What's a good way to do this check?

Ultimately my intention is to be able to do these:

if(is_touch_device())

if(has_mouse_support())

if(is_touch_device() && has_mouse_support())

Answer 1

There's a CSS media just for that!

You can check whether some device has a mouse by getting the value of the pointer CSS media feature:

if (matchMedia('(pointer:fine)').matches) {
  // Device has a mouse
}

Because it's CSS you don't even need to use JavaScript:

@media (pointer: fine) {
  /* Rules for devices with mouse here */
}