jQuery onMouseover/onClick for Touchscreen users（すなわちiPad）

Question

私は、画面の右上にある6つの「ジュエルボタン」にメニューを最小化したWebサイトベースのシステムに折りたたみ可能なメニューを作りました。同じもので、メニュー内の項目を参照するアラートの数である数字が含まれています。

これらの内容は私の質問と実際には関係ありませんが、単にテキストではないため、メニュー項目の内容を説明するラベルを明瞭に読みやすいわけではありません。

したがって、私はonMouseoverツールチップを置いて、それぞれのメニュー項目が何であるかを説明する隠れたdivを表示しています。

また、jQueryがメニューを表示するためのonClickイベントもあります。

これは、プライベートイントラネットシステムであり、それは十分に明らかではないとして、私は公共のウェブサイト上でこれらのメニューを使用することはありませんが、これはアプリケーションであることを考えると、私の問題は次のとおりです。

のためにiPadで見た場合例（とおそらく他のタッチスクリーンデバイス）では、onMouseoverはonClickとして扱われるため、ボタンをクリックするだけでツールチップが表示され、必要に応じてメニューは表示されません。

これを処理するためのアドバイスは何ですか？

これはプライベートWebアプリケーションだから、iPadユーザーを検出してjQueryを再構築してiPadユーザーのonMouseoverコマンドを無視することができましたが、同様のアプリケーションを何かに展開するとより多くのユーザーがいる可能性があります、これらの2つのイベントを処理する方法は何ですか？イベント結合（まだのような）フルスクリーンJS Fiddle demoでなくて（私はを容易にするため、そのデモにリダイレクトするTinyURLのをまた作ったとはいえ、私は、以下の簡単なデモでこれをテストしてみた

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. 
} 

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/）。

参考：ここにStackOverflowで

• 質問と回答、：
  • Detecting support for a given JavaScript event?
  • iOS Web App touch gestures