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 w         


        

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 */
}

Answer 2

var clickHandler = (isMouseEventSupported('click') ? 'click' : 'touchstart');

function isMouseEventSupported(eventName) {
    var element = document.createElement('div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in element);
    if (!isSupported) {
       element.setAttribute(eventName, 'return;');
       isSupported = typeof element[eventName] == 'function';
    }
    element = null;
    return isSupported;
}

This is code from a friend/coworker of mine and he based it off of: http://perfectionkills.com/detecting-event-support-without-browser-sniffing/

Answer 3

There is no immediate way of knowing, you'll have to wait for a touch event or a mouse event.

Presuming you want to detect either mouse or touch you can do the following: listen for touchstart and mousemove (the latter can fire on touch devices without an actual mouse). Whichever one fires first is 99% bound to be what you're looking for.

This does not take in account devices that actually have both.

document.addEventListener('mousemove', onMouseMove, true)
document.addEventListener('touchstart', onTouchStart, true)
function onTouchStart(){
  removeListeners()
  // touch detected: do stuff
}
function onMouseMove(){
  removeListeners()
  // mouse detected: do stuff
}
function removeListeners(){
  document.removeEventListener('mousemove', onMouseMove, true)
  document.removeEventListener('touchstart', onTouchStart, true)
}

Answer 4

As mentioned in the question comments, specifically on https://github.com/Modernizr/Modernizr/issues/869, there is no good answer yet.

Answer 5

I am currently using the following (jQuery) and I haven't found any flaws yet on specific devices

$(window).bind('mousemove.hasMouse',function(){
    $(window).unbind('.hasMouse');
    agent.hasMouse=true;
}).bind('touchstart.hasMouse',function(){
    $(window).unbind('.hasMouse');
    agent.hasMouse=false;
});

Explanation: Mouse devices (also touch screen laptops) first fire mousemove before they can fire touchstart and hasMouse is set to TRUE. Touch devices (also for instance iOS which fires mousemove) FIRST fire touchstart upon click, and then mousemove. Then is why hasMouse will be set to FALSE.

The only catch is that this depends on user interaction, the value will only be correct after mouse move or touchstart so cannot be trusted to use on page load.

Answer 6

Answer by @josemmo is not working for me: on android phone with mouse attached matchMedia('(pointer:fine)').matches does not matches.

Fortunately, I've succeed with another media query: hover.

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