在我正在構建的網站上，我有一組導航按鈕，需要很大以便看起來很漂亮，並且可以輕鬆點擊，但在用戶不導航時需要很小。因此，在我的用戶界面中，我將按鈕縮小爲縮略圖，並在鼠標懸停時將其設置爲全尺寸。這很好。如何在網站中檢測鼠標的存在？
但是在平板電腦上，沒有鼠標，沒有鼠標懸停，所以我需要另一種讓用戶導航的機制。我想讓用戶點擊縮略圖，然後展開完整的導航按鈕欄，然後用戶可以點擊導航。
問題是：如何判斷用戶是否用鼠標進行瀏覽？我想我可以瀏覽器檢測，但這似乎很片。
另外，有人可以指出我對這種情況有更好的UI設計模式嗎？
這只是爲了移動Safari而已。我不確定Android/Windows Mobile支持。 – 2012-08-02 16:30:31
一種選擇是檢測瀏覽器代理。
但是，您也可以註冊僅在觸摸設備上觸發的touchstart/touchmove/touchend事件的偵聽器。
順便說一句，有一個新的CSS media queries in level 4。
也許你最感興趣的是「指針」，爲此用戶代理將返回「無|粗| |罰款「。根據規範，」一個「精細」指向系統的典型例子是鼠標，觸控板或觸筆式觸摸屏。基於手指的觸摸屏將被視爲「粗糙」。「
創建自定義點擊事件，將其與函數綁定，然後最終將創建的點擊事件分派給文檔。如果函數成功地設法觸發，那麼用戶有一個鼠標，否則它可以是任何無鼠標設備
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
不是現在真正有用的，但有一個媒體查詢的通話將檢測這是很酷 - http://www.webmonkey.com/2012/07/w3c-looking-to-improve-responsive-設計與新媒體查詢/ – SpaceBeers 2012-08-02 16:28:30
幾個似是而非的答案在這裏... http://stackoverflow.com/questions/3974827/detecting-touch-screen-devices-with-javascript – 2012-08-02 16:30:27
@SpaceBeers：這是有趣。將在瀏覽器開始支持它時將它歸檔。 – 2012-08-02 16:31:04