タッチスクリーンデバイスでは、タッチイベントの二次カプセル化によっていくつかの比較的基本的なジェスチャーを実装する必要があります。
Zeptoはモバイルデバイスで比較的高い使用率を持つクラスライブラリですが、タッチモジュールでシミュレートされたイベントには、いくつかのAndroidデバイスにイベント侵入バグがあるタップイベントなど、いくつかの互換性の問題があり、他の種類のイベントにも多かれ少なかれ互換性の問題があります。
ですから、私は単にこれらの一般的に使用されるジェスチャーイベントを自分でカプセル化しました。テストする実際のデバイスは多くないため、互換性の問題がいくつかある可能性があります。次のコードは、iOS 7およびAndorid 4のより一般的なブラウザでのみテストされています。
タップイベント
TAPイベントは、PCブラウザのクリックエフェクトと同等です。クリックイベントはまだタッチスクリーンデバイスで利用できますが、クリックすると多くのデバイスが遅れます。 「クリック」イベントにすばやく応答したい場合は、タッチイベントを使用してそれを達成する必要があります。
コードコピーは次のとおりです。
var starttx、startty;
Element.AddeventListener（ 'TouchStart'、function（e）{
var touches = e.touches [0];
starttx = touches.clientx;
startty = touches.clienty;
}、 間違い ）;
element.AddeventListener（ 'touchend'、function（e）{
var touches = e.changedtouches [0]、
endtx = touches.clientx、
endty = touches.clienty;
//一部のデバイスでは、タッチイベントがより敏感であるため、指を押してリリースするときにイベント座標が少し変更されます。
if（math.abs（starttx -endtx）<6 && math.abs（startty -endty）<6）{
console.log（ 'Fire Tap Event'）;
}
}、 間違い ）;
doubleTapイベント
DoubleTapイベントは、同じ位置範囲内で非常に短い時間内に指が画面を2回タップするとトリガーされるイベントです。一部のブラウザでは、DoubleTapイベントがテキストを選択します。テキストを選択したくない場合は、ユーザー-Select：なしのCSS属性を要素に追加できます。
コードコピーは次のとおりです。
var istouchend = false、
最後の時間= 0、
lasttx = null、
latty = null、
firstTouchend = true、
body = document.body、
dtaptimer、starttx、startty、starttime;
Element.AddeventListener（ 'TouchStart'、function（e）{
if（dtaptimer）{
ClearTimeout（dtaptimer）;
dtaptimer = null;
}
var touches = e.touches [0];
starttx = touches.clientx;
startty = touches.clienty;
}、 間違い ）;
element.AddeventListener（ 'touchend'、function（e）{
var touches = e.changedtouches [0]、
endtx = touches.clientx、
endty = touches.clienty、
now = date.now（）、
持続時間= now -lasttime;
//最初に、単一のタップイベントをトリガーできることを確認してください
if（math.abs（starttx -endtx）<6 && math.abs（starttx -endtx）<6）{
// 2つのタップ間の間隔が500ミリ秒以内であることを確認してください
if（期間<301）{
//このタップの位置と最後のタップの位置により、特定の範囲内のエラーが許可されます
if（lasttx！== null &&
math.abs（lasttx -endtx）<45 &&
Math.Abs（lastty -endty）<45）{
firstTouchend = true;
lasttx = lastty = null;
console.log（ '火のダブルタップイベント'）;
}
}
それ以外{
lasttx = endtx;
latty = endty;
}
}
それ以外{
firstTouchend = true;
lasttx = lastty = null;
}
最後の= now;
}、 間違い ）;
//指はiOS Safariで画面を速すぎます。
// TouchStartとTouchEndイベントが2度目に応答されないという特定のチャンスがあります
//同時に、指のタッチがクリックをトリガーしません
if（〜NAVIGATOR.USERAGENT.TOLOWERCASE（）。indexof（ 'iPhone OS'））{
body.addeventlistener（ 'touchstart'、function（e）{
starttime = date.now（）;
}、 真実 ）;
body.addeventlistener（ 'touchend'、function（e）{
var nolongtap = date.now（） - starttime <501;
if（firstTouchend）{
firstTouchend = false;
if（nolongtap && e.target ===要素）{
dtaptimer = setimeout（function（）{
firstTouchend = true;
lasttx = lastty = null;
console.log（ '火のダブルタップイベント'）;
}、400）;
}
}
それ以外{
firstTouchend = true;
}
}、 真実 ）;
//クリックイベントは、iOSでフィンガーが画面を複数回タップするときにトリガーされません。
Element.AddeventListener（ 'Click'、function（e）{
if（dtaptimer）{
ClearTimeout（dtaptimer）;
dtaptimer = null;
firstTouchend = true;
}
}、 間違い ）;
}
Longtapイベント
Longtapイベントは、指が長い間画面を保持し、動かないままであるときにトリガーされるイベントです。
コードコピーは次のとおりです。
var starttx、startty、ltaptimer;
Element.AddeventListener（ 'TouchStart'、function（e）{
if（ltaptimer）{
cleartimeout（ltaptimer）;
ltaptimer = null;
}
var touches = e.touches [0];
starttx = touches.clientx;
startty = touches.clienty;
ltaptimer = setimeout（function（）{
console.log（ 'fire longタップイベント'）;
}、1000）;
E.PreventDefault（）;
}、 間違い ）;
element.AddeventListener（ 'touchmove'、function（e）{
var touches = e.touches [0]、
endtx = touches.clientx、
endty = touches.clienty;
if（ltaptimer &&（math.abs（endtx -starttx）> 5 || math.abs（endty -startty）> 5））{
cleartimeout（ltaptimer）;
ltaptimer = null;
}
}、 間違い ）;
element.AddeventListener（ 'touchend'、function（e）{
if（ltaptimer）{
cleartimeout（ltaptimer）;
ltaptimer = null;
}
}、 間違い ）;
スワイプイベント
スワイプイベントは、指が画面上でスライドするときにトリガーされるイベントです。 Swipeleft（左）、Swiperight（右）、Swipeup（Up）、Swipedown（下）に分かれています。
コードコピーは次のとおりです。
var istouchmove、starttx、startty;
Element.AddeventListener（ 'TouchStart'、function（e）{
var touches = e.touches [0];
starttx = touches.clientx;
startty = touches.clienty;
iStouchMove = false;
}、 間違い ）;
element.AddeventListener（ 'touchmove'、function（e）{
IstouchMove = true;
E.PreventDefault（）;
}、 間違い ）;
element.AddeventListener（ 'touchend'、function（e）{
if（！istouchmove）{
戻る;
}
var touches = e.changedtouches [0]、
endtx = touches.clientx、
endty = touches.clienty、
distancex = starttx -endtx
Distaningy = startty -endty、
isswipe = false;
if（math.abs（distancex）> = math.abs（distangy））{
if（distancex> 20）{
console.log（ 'fire Swipe Left Event'）;
isswipe = true;
}
else if（distancex <-20）{
console.log（ '火のスワイプ右イベント'）;
isswipe = true;
}
}
それ以外{
if（distangy> 20）{
console.log（ 'Fire Swipe Up Event'）;
isswipe = true;
}
else if（distangy <-20）{
console.log（ 'Fire Swipe Down Event'）;
isswipe = true;
}
}
if（isswipe）{
console.log（ 'Fire Swipe Event'）;
}
}、 間違い ）;
上記でシミュレートされたすべてのイベントは、Monoeventでカプセル化されています。完全なコードアドレス：https：//github.com/chenmnkken/monoevent、それを必要とする友人、見てください〜
PS：ここでは、JSイベントに関するオンラインクエリツールをお勧めします。これは、一般的に使用されるイベントタイプとJSの関数関数を要約しています。
JavaScriptイベントと機能の完全なリスト：
http://tools.vevb.com/table/javascript_event