ユーザーが popup-div の外で ( ) をタップした場合、touchstart
ポップアップを非表示にしたい。
しかし、ユーザーの意図がスクロール/スワイプ ( touchmove
) である場合、ポップアップを非表示にしたくありません。
これら 2 つのアクションを (jQuery の有無にかかわらず) 検出して応答するコードはどのようになるでしょうか?
ユーザーが popup-div の外で ( ) をタップした場合、touchstart
ポップアップを非表示にしたい。
しかし、ユーザーの意図がスクロール/スワイプ ( touchmove
) である場合、ポップアップを非表示にしたくありません。
これら 2 つのアクションを (jQuery の有無にかかわらず) 検出して応答するコードはどのようになるでしょうか?
これを行う方法の基本的な例を次に示します: http://jsfiddle.net/4CrES/2/
その背後にあるロジックには、最初のタッチ時間を検出して変数に保存することが含まれます
touchTime = new Date();
touchend ハンドラーで、現在の時間からこの時間を減算して差を取得します。
var diff = new Date() - touchTime;
if ステートメントを使用して、タッチの継続時間がタップと見なすのに十分短いか、ドラッグと見なすのに十分長いかを判断します。
if (diff < 100){
//It's a tap
}
else {
//Not a quick tap
}
ハンドラーで最初のタッチの y 位置と最後のタッチの y 位置の同様の違いを行うことで、より堅牢な実装を作成できます。もう 1 つのオプションは、スクロール領域の scrollTop を比較して、スクロールされたかどうかを確認することです。
touchend
イベントの popup-div を非表示にできます。window.scrollY を覚えている場合
。イベントでは、
位置が異なる場合、ユーザーはスクロールしています。touchstart
touchend
scrollY