ホームページ > 記事 > ウェブフロントエンド > jQuery モバイル ページのタッチ イベントと仮想マウス イベントの概要development_jquery
jQuery モバイル ページのタッチ イベントと仮想マウス イベントの概要development_jquery
- WBOYオリジナル
- 2016-05-16 15:27:481275ブラウズ
タッチイベント(タッチ)
jQuery Mobile ではカスタマイズ可能なタッチ イベントがいくつかあります。ただし、これらのイベントは、タッチ対応デバイスを操作するユーザーが jQuery Mobile サイトにアクセスした場合にのみ使用できます。これらのイベントが利用可能になると、タップ、タップホールド、スワイプ、左にスワイプ、右にスワイプという 5 つの異なるイベントに応答してカスタム JavaScript をトリガーできます。
タップ: 素早く完全にタップした後にトリガーされます
taphold (タップアンドホールド): タップアンドホールド (約 1 秒) 後にトリガーされます
スワイプ: 1 秒以内に水平方向のドラッグが 30 ピクセルを超えるか、垂直方向のドラッグが 20 ピクセル未満である場合にトリガーされるイベント。ドラッグする長さとピクセル数を設定できます。このイベントには、
という属性が関連付けられています。scrollSupressionThreshold (デフォルト: 10px) – この値を超える水平方向のドラッグはトリガーされません。
durationThreshold (デフォルト: 1000ms) – スライド時間がこの値を超える場合、スライド イベントは生成されません。
horizontalDistanceThreshold (デフォルト: 30px) – 水平スワイプ距離がこの値を超えた場合にのみ、スライディング イベントが発生します。
verticalDistanceThreshold (デフォルト: 75px) – 垂直スワイプ距離がこの値より小さい場合にのみ、スライディング イベントが発生します。
swipeleft (左スワイプ): スワイプ イベントが左方向の場合にトリガーされます
swipright (右スワイプ): スワイプ イベントが右方向の場合にトリガーされます
これらのイベントをバインドするには、次のコード例に示すように、document.ready() でプログラムするだけです。
<!DOCTYPE HTML>
<html>
<head>
<title>Understanding the jQuery Mobile API</title>
<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>
<script type="text/java script">
$(document).ready(function(){
$(".tap-hold-test").bind("taphold", function(event) {
$(this).html("Tapped and held");
});
});
</script>
<script src="jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="my-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="my-list">
<li class="tap-hold-test">Tap and hold test</li>
</ul>
</div>
</div>
</body>
</html>
上記のコードからわかるように、リストはタップホールド イベントにバインドされており、DOM がロードされてタップホールド イベントがトリガーされると、タップ アンド ホールド プロンプト メッセージが表示されます。
仮想マウス イベント
マウス イベントとタッチ イベントを抽象化するために、一連の「仮想」マウス イベントを提供します。これにより、開発者は、mousedown、mousemove、mouseup、click などの基本的なマウス イベントのリスナーを登録できるようになります。プラグインはタッチ環境にあり、プラグインは従来のマウス環境でトリガーされる順序を維持します。たとえば、vmouseup は常に vmousedown より前にトリガーされ、vmousedown は常に vmouseup より前にトリガーされます。仮想マウスイベントにより、本の剣から放出される座標情報も正規化されます。したがって、イベント オブジェクトの pageX、pageY、screenX、screenY、clientX、および clientY プロパティの座標は、タッチベースのデバイスで使用できます。
vmouseover: タッチまたはマウスオーバーの正規化されたイベントを処理します
vmousedown: タッチスタートまたはマウスダウンの正規化されたイベントを処理します
vmousemove: touchmove または Mousemove の正規化されたイベントを処理します
vmouseup: タッチエンドまたはマウスアップの正規化されたイベントを処理します
vclick: タッチエンドまたはマウスクリックの正規化されたイベントを処理します。タッチベースのデバイスでは、このイベントは vmouseup イベントの後に発生します。
vmousecancel: タッチまたはマウスの正規化されたイベントを処理します。mousecancel
警告: vclick の使用には注意が必要です
タッチ デバイスで vclick を使用する場合は注意してください。 Webkit ベースのブラウザーは、touchend イベントがトリガーされてから 300 ミリ秒後に、mousedown、mouseup、および click イベントを生成します。 これらの生成されたマウス イベントのターゲットは、タッチ イベントの位置に基づいて、発生時に計算されます。場合によっては、デバイスごとに、または同じデバイス上の OS ごとに異なる計算が行われる可能性があります。これは、元のクリック イベントのターゲット要素が、ブラウザ自体によって生成されたマウス イベントのターゲット要素と同じではない可能性があることを意味します。
タッチによってクリックしたポイントより下のコンテンツが変更される可能性があるイベントでは、vclick メソッドの代わりに click メソッドを使用することをお勧めします。このようなイベントには、ページの遷移や、画面の変更やコンテンツの完全な置き換えを引き起こす可能性のある縮小/拡張などのその他の動作が含まれます。
要素のデフォルトのクリック動作をキャンセルします
アプリケーションは vclick イベントを呼び出して、要素のデフォルトのクリック イベントをキャンセルします。マウスベースのデバイスでは、vclick イベントでのPreventDefault() メソッドの呼び出しは、実際のクリックの一時的なバブリング段階でのPreventDefault() メソッドの呼び出しと同じです。タッチベースのデバイスでは、実際のクリック イベントは vclick イベントがトリガーされてから 300 ミリ秒後にトリガーされるため、処理は少し複雑になります。タッチ デバイスの場合、vclick イベントでPreventDefault() メソッドを呼び出すと、vmouse プラグイン内の一部のコードが次のクリック イベントをキャプチャしようとします。したがって、上記の注意事項によれば、タッチ イベントとそれに対応するマウス イベントを一致させることは、目的が異なるため困難です。そのため、vmouse プラグインが座標を介して一致するクリック イベントを識別しようとすると、通常は失敗します。
場合によっては、2 つのイベントのターゲットと座標の認識が失敗し、クリック イベントがトリガーされるか要素のデフォルト アクションが実行されるか、コンテンツが変更または置換されるとクリック イベントが発生することがあります。他の要素がトリガーされます。このようなバグが特定の要素で定期的に発生する場合は、アクションにクリック駆動のトリガーを使用することをお勧めします。