5

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

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

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

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

4

3 回答 3

2

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

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

顺便说一句，第 4 级有一个新的CSS 媒体查询。

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

于 2012-08-02T16:32:58.877 回答
0 
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 加载开始时运行！ 演示

于 2012-08-02T17:20:52.993 回答
0

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

于 2012-08-02T16:39:08.780 回答