ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryにタッチ機能はありますか?

jqueryにタッチ機能はありますか?

WBOY
WBOYオリジナル
2022-06-09 18:27:212319ブラウズ

jquery にはタッチ関数があり、ユーザーがページにタッチするとタッチ関数がトリガーされます: 1. ユーザーが要素をタップするとタップ イベントがトリガーされます; 2. 要素がタップされたときにタップホールド イベントがトリガーされます。ユーザーが要素をタップし、1 秒間押し続けるとトリガーされます; 3. ユーザーが要素上で水平に 30 ピクセルを超えてスライドすると、スワイプ イベントがトリガーされます; 4. ユーザーが要素上で左から 30 ピクセルを超えてスライドすると、swipeleft イベントがトリガーされます要素; 5. ユーザーが要素上で左から 30 ピクセルを超えてスライドすると、swiperight イベントがトリガーされ、要素が右から 30 ピクセルを超えてスライドするとトリガーされます。

jqueryにタッチ機能はありますか?

このチュートリアルの動作環境: Windows10 システム、jquery3.4.1 バージョン、Dell G3 コンピューター。

jquery にはタッチ機能がありますか

Touch イベントは、ユーザーが画面 (ページ) に触れるとトリガーされます。

  • タップ イベントは、ユーザーが要素をタップするとトリガーされます。

  • ユーザーが要素をタップして 1 秒間保持すると、タップホールド イベントがトリガーされます。

  • ユーザーが要素をタップすると、スワイプ イベントがトリガーされます要素を水平方向にユーザーが要素上で左から 30 ピクセルを超えてスライドすると、swipeleft イベントがトリガーされます。

  • ユーザーが要素上で左から 30 ピクセルを超えてスライドすると、swipeleft イベントがトリガーされます。要素:

  • swiperight ユーザーが要素上で右から 30 ピクセル以上スライドするとイベントがトリガーされます:

簡単な説明:

tap (タップ): 素早く完全なタップ

taphold (タップアンドホールド) 後のトリガー: タップアンドホールド (約 1 秒) してからトリガー

swipe (スワイプ) : 1 秒以内に水平に 30PX 以上ドラッグ、または垂直に 20PX 未満のドラッグでイベントが発生します。ドラッグする長さとピクセル数を設定できます。このイベントには、

  • scrollSupressionThreshold (デフォルト: 10px) という関連プロパティがあります。この値を超える水平方向のドラッグはトリガーされません。

  • durationThreshold (デフォルト: 1000ms) – スライド時間がこの値を超える場合、スライド イベントは生成されません。

  • horizo​​ntalDistanceThreshold (デフォルト: 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。