How can I detect the existence of a mouse in a web site?

Question

On a web site I'm building, I've got a set of navigation buttons that needs to be large to look nice and be easily clickable, but needs to be small when the user isn't navigating. So in my UI, I shrink the buttons down to a thumbnail, and on mouse hover I animate it to full size. This works well.

But on tablets, there's no mouse, and no mouse hover, and so I need another mechanism for letting users navigate. I was thinking of letting the user tap on the thumbnail, then expanding the full nav button bar, and then the user can tap to navigate.

The question is: how can I tell if the user is browsing with no mouse? I guess I could browser detect, but this seems really flaky.

Alternatively, can someone point me to a better UI design pattern for this situation?

Not really useful now but there is talk of a media query that will detect this which is pretty cool - http://www.webmonkey.com/2012/07/w3c-looking-to-improve-responsive-design-with-new-media-queries/ — SpaceBeers, Aug 02 '12 at 16:28
Several plausible answers here... http://stackoverflow.com/questions/3974827/detecting-touch-screen-devices-with-javascript — Philip Kirkbride, Aug 02 '12 at 16:30
@SpaceBeers: That's interesting. Will file it away for when browsers start supporting it. — Joshua Frank, Aug 02 '12 at 16:31
See http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript (it's the converse) — Faust, Aug 02 '12 at 16:31
@JoshuaFrank - It's on my radar but I think we might be waiting a while... — SpaceBeers, Aug 02 '12 at 16:31
@PhilipK: Will read through that page and see what I can find. Thanks. — Joshua Frank, Aug 02 '12 at 16:33

Ashwin Prabhu · Answer 1 · 2012-09-10T05:58:56.580

One option is to detect the browser agent.

But you may also register listeners for touchstart/touchmove/touchend events which are triggered only on touch devices.

BTW there is a new CSS media queries in level 4.

Perhaps the most interesting for you would be the "pointer", for which the user agent is expected to return “none | coarse | fine.” According to the the spec, “typical examples of a ‘fine’ pointing system are a mouse, a track-pad or a stylus-based touch screen. Finger-based touch screens would qualify as ‘coarse.’”

score 0 · Answer 2 · answered Aug 02 '12 at 16:39

0

create a custom click event, bind it with a function, then finally dispatch the created click event to the document. If the function successfully managed to trigger, then the user has a mouse otherwise it could be any mouseless device

answered Aug 02 '12 at 16:39

spaceman12

1,039
11
18

spaceman12 · Answer 3 · 2012-08-02T17:28:40.983

function isEvent(ev)
{
    var d=document;
    var isTrue=false;
    var fn=function()
    {
        isTrue=true;
    }
    d.body.onclick=fn;
    var e;
    if(d.createEvent)
    {
        e=d.createEvent('Event');
        e.initEvent(ev,false,false);
        d.body.dispatchEvent(e);
    }
    else if(d.createEventObject)
    {
        e=d.createEventObject(window.event);
        d.body.fireEvent('on'+ev,e);
    }
    return isTrue;
}

//run the code
var isMouse=isEvent('click');
if(isMouse)
{
    alert('user has a mouse');
}

Make sure to run only when the loading of the body started! DEMO

How can I detect the existence of a mouse in a web site?

3 Answers3