Geek asks and answers

How can I detect the presence of a mouse on a website?

On the website I am creating, I have a set of navigation buttons that should be large in order to look nice and easy to click, but they should be small when the user is not moving. Thus, in my user interface, I squeeze the buttons to a thumbnail, and when I hover over the mouse, I animate it to full size. It works well.

But tablets have no mouse and mouse, and I need one more mechanism to allow users to navigate. I was thinking about letting the user click on the thumbnail, and then expand the button bar of the navigation bar, and then the user can click to go.

Question: how do I know if a user is being viewed without a mouse? I guess I can detect the browser, but it seems really flaky.

Alternatively, can someone point me to the best UI design for this situation?

+5
source share
5 answers

http://detectmobilebrowsers.com/ may interest you

+4
source

One option is to detect the browser agent.

But you can also register listeners for events touchstart/touchmove/touchendthat run only on touch devices.

By the way, there is a new CSS multimedia query at level 4 .

, "", , "none | ". , " " " , - . " ".

+2

create a custom click event, associate it with a function, and then finally send the created click event to the document. If the function was successfully launched, then the user has a mouse, otherwise it can be any hand-held device.

0
source 
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');
}

Be sure to run only when loading the body! Demo

0
source

More articles:


All Articles