的jQuery的onmouseover /的onClick對觸摸屏的用戶（即新iPad）

Question

所以，我做了一個可摺疊的菜單到一個網站爲基礎的系統，其最小化菜單到屏幕的右上方6「寶石按鈕」，每個看起來相同幷包含一個數字，這是涉及菜單內項目的警報數量。

的這些內容是不是我的問題真的很重要，但只是解釋說，他們是不是因此文本，因此沒有明確和易於閱讀標籤說明該菜單項做。

因此，我把一個的onmouseover工具提示，顯示隱藏的div解釋每一個菜單項是什麼。

還有一個onClick事件，jQuery將菜單滑動到視圖中。

這是一個私人的Intranet系統，我不會因爲它不夠明確使用公共網站上這些菜單，但考慮到這是應用程序，我的問題是：

當在iPad上進行觀看例如（大概是其他的觸摸屏設備），onMouseover作爲onClick處理，因此，'點擊'按鈕只顯示工具提示，而不是根據需要顯示菜單。

處理這個問題的建議是什麼？

我看過這個主題Detect iPad users using jQuery?所以，鑑於它是一個私人的網絡應用程序，我可以檢測iPad用戶，並重新構建jQuery忽略iPad用戶的onMouseover命令，但如果我要將類似的應用程序擴展到某些東西可能有更多的用戶，那麼處理這兩個事件的方式是什麼？

Answer 1

if ("ontouchstart" in window || "ontouch" in window) { 
    // bind the relevant functions to the 'touch'-based events for iOS 
} 
else { 
    // use the classic mouse-events, 'mouseover,' 'click' and so on. 
} 

我沒有用下面的簡單的演示測試此，儘管事件結合在全屏JS Fiddle demo（尚未）（我也做了一個TinyURL的重定向到該演示中，爲了便於進入iOS設備：tinyurl.com/drtjstest2/）。

修訂演示，與事件分配功能：

var body = document.getElementsByTagName('body')[0]; 

if ("ontouchstart" in window) { 
    body.style.backgroundColor = 'red'; 
    body.ontouchstart = function(){ 
     this.style.backgroundColor = 'yellow'; 
    }; 
    body.ontouchend = function(){ 
     this.style.backgroundColor = 'green'; 
    }; 
} 
else { 
    body.style.backgroundColor = 'green'; 
    body.onmousedown = function(){ 
     this.style.backgroundColor = 'yellow'; 
    }; 
    body.onmouseup = function(){ 
     this.style.backgroundColor = 'red'; 
    }; 
} 

JS Fiddle demo（以及TinyUrled替代：tinyurl.com/drtjstest3/）。

參考文獻：

• 問題和答案，在這裏＃1：
  • Detecting support for a given JavaScript event?
  • iOS Web App touch gestures