ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryにタッチ機能はありますか?
jquery にはタッチ関数があり、ユーザーがページにタッチするとタッチ関数がトリガーされます: 1. ユーザーが要素をタップするとタップ イベントがトリガーされます; 2. 要素がタップされたときにタップホールド イベントがトリガーされます。ユーザーが要素をタップし、1 秒間押し続けるとトリガーされます; 3. ユーザーが要素上で水平に 30 ピクセルを超えてスライドすると、スワイプ イベントがトリガーされます; 4. ユーザーが要素上で左から 30 ピクセルを超えてスライドすると、swipeleft イベントがトリガーされます要素; 5. ユーザーが要素上で左から 30 ピクセルを超えてスライドすると、swiperight イベントがトリガーされ、要素が右から 30 ピクセルを超えてスライドするとトリガーされます。
このチュートリアルの動作環境: Windows10 システム、jquery3.4.1 バージョン、Dell G3 コンピューター。
Touch イベントは、ユーザーが画面 (ページ) に触れるとトリガーされます。
タップ イベントは、ユーザーが要素をタップするとトリガーされます。
ユーザーが要素をタップして 1 秒間保持すると、タップホールド イベントがトリガーされます。
ユーザーが要素をタップすると、スワイプ イベントがトリガーされます要素を水平方向にユーザーが要素上で左から 30 ピクセルを超えてスライドすると、swipeleft イベントがトリガーされます。
ユーザーが要素上で左から 30 ピクセルを超えてスライドすると、swipeleft イベントがトリガーされます。要素:
swiperight ユーザーが要素上で右から 30 ピクセル以上スライドするとイベントがトリガーされます:
簡単な説明:
tap (タップ): 素早く完全なタップ
taphold (タップアンドホールド) 後のトリガー: タップアンドホールド (約 1 秒) してからトリガー
swipe (スワイプ) : 1 秒以内に水平に 30PX 以上ドラッグ、または垂直に 20PX 未満のドラッグでイベントが発生します。ドラッグする長さとピクセル数を設定できます。このイベントには、
scrollSupressionThreshold (デフォルト: 10px) という関連プロパティがあります。この値を超える水平方向のドラッグはトリガーされません。
durationThreshold (デフォルト: 1000ms) – スライド時間がこの値を超える場合、スライド イベントは生成されません。
horizontalDistanceThreshold (デフォルト: 30px) – 水平スワイプ距離がこの値を超えた場合にのみ、スライディング イベントが発生します。
verticalDistanceThreshold (デフォルト: 75px) – 垂直スワイプ距離がこの値より小さい場合にのみ、スライド イベントが発生します。
swipeleft (左スワイプ): スワイプ イベントが左方向の場合にトリガーされます。
swiperight (右スワイプ): スワイプ イベントが右方向の場合にトリガーされます
例は次のとおりです:
tap (タップ): 素早く完全なタップ後にトリガーされます
$(function(){ $("#home").live('tap', function() { $('#toPage2').click(); // 为首页绑定点击事件 }); $("#page-2").live('tap', function() { $('#toHome').click(); // 为另一页面绑定点击事件 }); });
taphold (タップアンドホールド): トリガータップしたまま(約 1 秒)後
$(function(){ $("#home").live('taphole', function() { $('#toPage2').click(); // 为首页绑定长按事件 }); $("#page-2").live('taphole', function() { $('#toHome').click(); // 为另一页面绑定长按事件 }); });
スワイプ (スワイプ): 左右にスワイプ
$(function(){ $("#home").live('swipe', function() { $('#toPage2').click(); // 为首页绑定滑动事件 }); $("#page-2").live('swipe', function() { $('#toHome').click(); // 为另一页面绑定滑动事件 }); });
推奨ビデオ チュートリアル: jQuery ビデオ チュートリアル
以上がjqueryにタッチ機能はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。