jQueryモバイルページ開発におけるタッチイベントと仮想マウスイベントの概要
3657 ワード
タッチイベント(touch)は、jQuery Mobileにおいていくつかのタッチイベントがカスタマイズ可能である.ただし、これらのイベントは、タッチ機能をサポートするデバイスとインタラクティブなユーザーがjQuery MobileのWebサイトにアクセスした場合にのみ使用できます.これらのイベントが使用可能になると、5つの異なるイベントに対する応答tap、taphold、swipe、swipeleft、swiperightとして任意のカスタムjava scriptをトリガーできます.
tap(軽撃):高速で完全な軽撃後にトリガー
taphold(軽撃不放):軽撃不放(約1秒)後にトリガー
swipe(スライド):1秒以内に水平ドラッグが30 PX以上、または縦ドラッグが20 px未満のイベントが発生したときにトリガーされるイベント.どのくらいpxをドラッグして設定できますか.このイベントには関連する属性があり、それぞれ
scrollSupressionThreshold(デフォルト:10 px),C水平方向ドラッグはこの値より大きく、トリガーされません.durationThreshold(デフォルト:1000 ms)では、Cのスライド時間がこの値を超えるとスライドイベントは発生しません.horizontalDistanceThreshold(デフォルト:30 px)、C水平ストローク距離がこの値を超えるとスライドイベントが発生します.verticalDistanceThreshold(デフォルト:75 px)、C垂直ストローク距離がこの値より小さい場合、スライドイベントが発生します.swipeleft(左ストローク):ストロークイベントが左方向の場合にトリガーされます
swiperight(右ストローク):ストロークイベントが右方向の場合にトリガーされます
これらのイベントをバインドするにはdocumentだけです.ready()では、次のコード例のようにプログラミングすればよい.
のコードから、リストリストをtapholdイベントにバインドし、DOMのロードが すると、tapholdイベントがトリガーされると、Tapped and heldのプロンプト が されます.
マウスイベント「 」マウスイベントを し、マウスとタッチイベントを しようとします.これにより、 は、mousedown、mousemove、mouseup、clickなどの なマウスイベントにリスニングを することができる.プラグインはタッチ で、プラグインは のマウス でトリガーされる を します.たとえば、vmouseupは にvmousedownの にトリガーされ、vmousedownは にvmouseupの にトリガーされるなどです. マウスイベントでは、 から される も されます.したがって、タッチベースのデバイスでは、イベントオブジェクトのpageX、pageY、screenX、screenY、clientX、and clientYなどの の を することができる.
vmouseover:touchまたはmouseoverの されたイベントを する
vmousedown:touchstartまたはmousedownの されたイベントを する
vmousemove:touchmoveまたはmousemoveの されたイベントを する
vmouseup:touchendまたはmouseupの されたイベントを する
vclick:touchendまたはマウスクリックの されたイベントを します.タッチベースのデバイスでは、このイベントはvmouseupイベントの にトリガーされる.
vmousecancel:touchまたはmouseのmousecancelの イベントを する
:vclickの に し、タッチデバイスでvclickの に してください.Webkitカーネルのブラウザはtouchendイベントがトリガーされた 、300 msで でmousedown、mouseup、clickの3つのイベントを します.これらの されたマウスイベントのターゲットは、トリガされたときに され、touchイベントに づく であり、 なるデバイス で じデバイスの なるOSでも なる をもたらす がある.これは、 のクリックイベントのターゲット ブラウザが で したマウスイベントのターゲット が じではない があることを します.タッチするとクリックしたポイントの の が わる があるイベントでは、vclickではなくclickメソッドを することをお めします.このようなイベントには、ページの や / などの の が まれ、 が したり、コンテンツが に き えられたりする があるイベントが まれます.
のデフォルトクリックをキャンセルする アプリケーションは、vclickイベントを び して のデフォルトクリックイベントをキャンセルします.マウスベースのデバイスでは、vclickイベントに してpreventDefault()メソッドを び すのは、 にクリックした バブルフェーズに してpreventDefault()メソッドを び すのと じである. のクリックイベントはvclickイベントが300ミリ にトリガーされるので、タッチベースのデバイスでは し です.タッチデバイスの 、vclickイベントに してpreventDefault()メソッドを び すと、vmouseプラグインのいくつかのコードが のクリックイベントをキャプチャしようとします.したがって、 の によれば、タッチイベントと するマウスイベントとを させるのは しい. らの は なるからだ.したがって、vmouseプラグインは、 によって するクリックイベントを しようとすると、 します.2つのイベントのターゲットと の に する があり、クリックイベントがトリガーされたり、 のデフォルト が されたり、 が されたり、 き えられたりした 、 の のクリックイベントがトリガーされます.このようなバグが の で に する , に してclickを いてトリガを することを する.
tap(軽撃):高速で完全な軽撃後にトリガー
taphold(軽撃不放):軽撃不放(約1秒)後にトリガー
swipe(スライド):1秒以内に水平ドラッグが30 PX以上、または縦ドラッグが20 px未満のイベントが発生したときにトリガーされるイベント.どのくらいpxをドラッグして設定できますか.このイベントには関連する属性があり、それぞれ
scrollSupressionThreshold(デフォルト:10 px),C水平方向ドラッグはこの値より大きく、トリガーされません.durationThreshold(デフォルト:1000 ms)では、Cのスライド時間がこの値を超えるとスライドイベントは発生しません.horizontalDistanceThreshold(デフォルト:30 px)、C水平ストローク距離がこの値を超えるとスライドイベントが発生します.verticalDistanceThreshold(デフォルト:75 px)、C垂直ストローク距離がこの値より小さい場合、スライドイベントが発生します.swipeleft(左ストローク):ストロークイベントが左方向の場合にトリガーされます
swiperight(右ストローク):ストロークイベントが右方向の場合にトリガーされます
これらのイベントをバインドするにはdocumentだけです.ready()では、次のコード例のようにプログラミングすればよい.
Understanding the jQuery Mobile API
$(document).ready(function(){
$(".tap-hold-test").bind("taphold", function(event) {
$(this).html("Tapped and held");
});
});
Header
- Tap and hold test
のコードから、リストリストをtapholdイベントにバインドし、DOMのロードが すると、tapholdイベントがトリガーされると、Tapped and heldのプロンプト が されます.
マウスイベント「 」マウスイベントを し、マウスとタッチイベントを しようとします.これにより、 は、mousedown、mousemove、mouseup、clickなどの なマウスイベントにリスニングを することができる.プラグインはタッチ で、プラグインは のマウス でトリガーされる を します.たとえば、vmouseupは にvmousedownの にトリガーされ、vmousedownは にvmouseupの にトリガーされるなどです. マウスイベントでは、 から される も されます.したがって、タッチベースのデバイスでは、イベントオブジェクトのpageX、pageY、screenX、screenY、clientX、and clientYなどの の を することができる.
vmouseover:touchまたはmouseoverの されたイベントを する
vmousedown:touchstartまたはmousedownの されたイベントを する
vmousemove:touchmoveまたはmousemoveの されたイベントを する
vmouseup:touchendまたはmouseupの されたイベントを する
vclick:touchendまたはマウスクリックの されたイベントを します.タッチベースのデバイスでは、このイベントはvmouseupイベントの にトリガーされる.
vmousecancel:touchまたはmouseのmousecancelの イベントを する
:vclickの に し、タッチデバイスでvclickの に してください.Webkitカーネルのブラウザはtouchendイベントがトリガーされた 、300 msで でmousedown、mouseup、clickの3つのイベントを します.これらの されたマウスイベントのターゲットは、トリガされたときに され、touchイベントに づく であり、 なるデバイス で じデバイスの なるOSでも なる をもたらす がある.これは、 のクリックイベントのターゲット ブラウザが で したマウスイベントのターゲット が じではない があることを します.タッチするとクリックしたポイントの の が わる があるイベントでは、vclickではなくclickメソッドを することをお めします.このようなイベントには、ページの や / などの の が まれ、 が したり、コンテンツが に き えられたりする があるイベントが まれます.
のデフォルトクリックをキャンセルする アプリケーションは、vclickイベントを び して のデフォルトクリックイベントをキャンセルします.マウスベースのデバイスでは、vclickイベントに してpreventDefault()メソッドを び すのは、 にクリックした バブルフェーズに してpreventDefault()メソッドを び すのと じである. のクリックイベントはvclickイベントが300ミリ にトリガーされるので、タッチベースのデバイスでは し です.タッチデバイスの 、vclickイベントに してpreventDefault()メソッドを び すと、vmouseプラグインのいくつかのコードが のクリックイベントをキャプチャしようとします.したがって、 の によれば、タッチイベントと するマウスイベントとを させるのは しい. らの は なるからだ.したがって、vmouseプラグインは、 によって するクリックイベントを しようとすると、 します.2つのイベントのターゲットと の に する があり、クリックイベントがトリガーされたり、 のデフォルト が されたり、 が されたり、 き えられたりした 、 の のクリックイベントがトリガーされます.このようなバグが の で に する , に してclickを いてトリガを することを する.