2016-09-02 18 views
0

Jqueryのホバーに問題があり、モバイルをクリックしています..説明しましょう!Jquery Clickはモバイルで2回タップする必要があります

私は四角形のdivを持ち、マウスを置くと新しいdivが現れ、マウスの後ろに表示されます。四角形のdivをクリックすることもできます。そうであれば、新しいページが開きます。問題は、モバイルでは、最初のクリックが「ホバー」と読み込まれるため、新しいページを開くために2回クリックする必要があるということです。

私は

$("#mydiv").on('click touchend', function(e) 

実際に、それは動作しますが、私は携帯電話上でページをスクロールしたい、と私は正方形のdivの上のスワイプを開始した場合、これに、新しいページが開かれ、それを試してみました私は正方形のdivをクリックしなかったので、ちょうど "通過"してはいけません。

答えて

0

これらのイベントのいずれかを使用してみてください:

「イベントのターゲットでも、タッチポイントに対応するtouchstartイベントを受信した同一の要素でありますタッチポイントがその要素の外に移動した場合。

またtouchendのマニュアルを参照してくださいすることができます

https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

あなたは、正方形のdiv要素を使用してスクロールを開始した場合、四角のdiv touchendイベントは、あなたを移動した後も、その指のリリース後に解雇されます他の要素に指をかける。あなたはこのtouchendイベントに固執したい場合は、回避策はあり

https://github.com/benmajor/jQuery-Touch-Events#4-the-events

は、あなたがこれらのイベントを使用することができ、この問題を解決するには は、IEのグローバル変数を宣言し

var isScroll = false, timer; 

タッチデバイス専用のtouchmoveイベントハンドラを適用します。このハンドラは、yesの場合はドキュメントがスクロールしているかどうかを検出します。isScrollフラグをtrueに設定すると、500ms後にfalseになります。

$(document).on("touchmove", function(e) { 
    isScroll = true; 
    if(timer) clearTimeout(timer); 
    timer = setTimeout(function() { 
    isScroll = false; 
    }, 800); 

})

と条件ならば、あなたなeventHandlerに挿入します。

$("#mydiv").on('click touchend', function(e) { 
    if(!isScroll) { 
    //insert your code here; 
    } 
} 
関連する問題