タッチデバイス上でjQueryのホバー（mouseenter、mouseleave）を無視する

Question

マウスやポインターを持たないため、画面上の要素をホバリングするという概念は、タッチデバイスには実際には適用できません。 JavaScriptホバーイベントのナビゲーションやその他の目的に頼っている多くのWebサイトでは、一部のタッチデバイスは、1回のタップでmouseenterを発生させるように実装しています。イベントハンドラもclickにバインドされている場合、これは要素の2回目のタップでのみ発生します。

jQueryのhover()機能が内部mouseenterとmouseleaveを使用するので、両方hover()とclick()登録持つ要素は後者をトリガするために2つのタップを必要とします。多くのユースケースでは、これはまさにあなたが起こりたいものです。しかし、hover()の処理では、ホバリングされた要素に強調（ツールチップ、グローなど）が追加されるアプリケーションでは、onclickハンドラに負担がかかり、すべてのタッチデバイスをスキップする方が意味があります。

私は具体的にtouchstartとtouchendのイベントを聞く方法を知っており、タッチのユーザーエクスペリエンスを調整することができます。これは私の問題に対する有効な解決策ですが、私はこの問題を回避するための "簡単な"方法があると考えています。私は、その署名にhover()と似たメソッドを想像していますが、提供されているイベントハンドラを非タッチデバイスにのみ接続する方法で実装されています。

jQueryにはこのようなメソッドがありますか？どんなプラグインですか？それとも私はここで何か見落としていますか？

---

挙動のiPad、iPhone、およびいくつかのAndroidの携帯電話に確認しました。

デスクトップとタッチデバイスでJsFiddle demoを実行すると、私の話を見ることができます。

Answer 1

私は、デバイスのtouchynessを検出し、html要素は「ノータッチ」クラスを持っていない限り、単にホバーハンドラをバインドしないようにModernizrを使用することをお勧め：

$('selector').click(...) 
$('.no-touch selector').hover(...) 

はhttp://jsfiddle.net/juYf8/17/

Answer 2

をチェックアウト、私はタッチとクリック/ホバーイベントをサポートするハイブリッドデバイスで何が起こるかは、いつも不思議です。この場合、タッチされると、利用可能なページ上のホバーまたはクリックイベントはなくなります。ユーザーが一度に画面にタッチしたとき（何らかの理由で）、マウスまたはタッチパッドを使用して戻ってきた場合はどうなりますか？サイトは彼のために壊れている（少なくとも彼が結果的にタッチを続けることを決断しないならば）。

私は個人的に以下のフラグスクリプトを使用し、最終的なタッチのためにマウスの入力とマウスの離脱イベントをチェックします。これが良いテクニックであるかどうかはわかりません。私の場合、それはかなりうまく動作します。

var touched = false; 

$("#someElement") 
    .mouseenter(function() { 
     if (!touched) { 
      // some hover action 
      // also secure to be in NO WAY triggered on touch device 
     }; 
    } 
    .mouseleave(function() { 
     if (!touched) { 
      // some mouse leave reset hover action 
      // also secure to be in NO WAY triggered on touch device 
     }; 
    } 
    .click(function() { 
     if (!touched) { 
      // do something 
      // no double trigger on touch device 
     }; 
    } 
    .on('touchstart', function() { 
     touched = true; 
     setTimeout(function() { 
      touched = false; 
     }, 300); 
     // do touchstart stuff (similar to click or not) 
    }; 

私はプロのコーダーではありません。それらのいずれかがそれを最適化するために招待されます。 私のウェブページでは、これはタッチデバイス（iPadがテスト済み）に隠れた（ダブル）トリガを避ける唯一の方法と思われます。

これは、私の目でハイブリッド問題を完全には解決していない最初の答え（そしてその良いコメント）に加えて多くの疑問に対する答えではないことも知っています。

いずれにしても、この方法で役立つことを願っています。