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

【问题标题】：How can I detect the existence of a mouse in a web site?如何检测网站中是否存在鼠标？
【发布时间】：2012-07-31 16:21:55
【问题描述】：

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

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

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

或者，有人可以指出针对这种情况的更好的 UI 设计模式吗？

【问题讨论】：

现在不是很有用，但是有一个媒体查询可以检测到这一点，这很酷 - webmonkey.com/2012/07/…
这里有几个似是而非的答案...stackoverflow.com/questions/3974827/…
@SpaceBeers：这很有趣。当浏览器开始支持它时，将其归档。
见stackoverflow.com/questions/4817029/…（正好相反）
@JoshuaFrank - 这在我的雷达上，但我想我们可能要等一段时间......

标签： javascript jquery html web-applications

【解决方案1】：

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

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

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

也许对你来说最有趣的是“指针”，用户代理应该返回“none |粗|美好的。”根据规范，“‘精细’指点系统的典型示例是鼠标、触控板或基于触控笔的触摸屏。基于手指的触摸屏将被视为“粗糙”。”

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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');
}

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

【讨论】：