如何检测网站中是否存在鼠标？

Question

在我正在构建的一个网站上，我有一组导航按钮，它们需要很大才能看起来很漂亮，并且很容易点击，但当用户不在导航时，它们需要很小。因此，在我的UI中，我将按钮缩小为缩略图，并在鼠标悬停时将其动画化为全尺寸。这样做效果很好。

但在平板电脑上，没有鼠标，也没有鼠标悬停，所以我需要另一种让用户导航的机制。我想让用户点击缩略图，然后展开完整的导航按钮栏，然后用户就可以点击导航了。

问题是:我如何判断用户是否在没有鼠标的情况下浏览？我想我可以通过浏览器进行检测，但这似乎真的很不可靠。

或者，有没有人可以为我推荐一种更好的UI设计模式来解决这种情况？

Answer 1

一种选择是检测浏览器代理。

但您也可以注册touchstart/touchmove/touchend事件的侦听器，这些事件仅在触摸设备上触发。

顺便说一句，这里有一个新的CSS media queries in level 4。

对于您来说，最有趣的可能是“指针”，对于它，用户代理应该返回“无|粗略|精细”。根据该规范，“典型的‘精细’指点系统是鼠标、触摸板或触摸屏。基于手指的触摸屏将被定义为“粗糙”。“

Answer 2

创建一个自定义的click事件，将其与一个函数绑定，最后将创建的click事件分派给文档。如果函数成功触发，则用户有鼠标，否则可以是任何无鼠标设备

Answer 3

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

确保仅在正文加载开始时运行！DEMO