「document.click」関数をデスクトップ デバイスとタッチ デバイスの両方で確実に動作させるにはどうすればよいですか?

タッチ デバイス向けのドキュメント .click 機能: 総合ガイド

インタラクティブな Web ページを作成する場合、ユーザーが両方のデスクトップ上の要素を操作できるようにしますそしてタッチデバイスは非常に重要です。 document.click 関数を使用してユーザー入力を処理する場合、タッチ デバイスでは期待どおりに動作しない可能性があるため、一般的な問題が 1 つ発生します。

この問題を理解するために、次のシナリオを考えてみましょう。リスト項目をクリックすると展開するサブナビゲーション メニューがあります。ドロップダウンを閉じるには、ユーザーが画面上のどこでもクリックできるようにする必要があります。ただし、この機能は、 document.click イベントの制限のため、タッチ デバイスでは動作しない可能性があります。

タッチ デバイスの回避策

この問題を解決するには、次の方法を使用できます。クリック入力とタッチ入力の両方をサポートする代替アプローチ。更新されたソリューションは次のとおりです。

$(document).on('click touchstart', function () {
  if ($(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }
});

ここで追加された重要な点は、touchstart イベント リスナーです。このイベントは、ユーザーが画面上の要素に触れるとすぐにトリガーされ、デスクトップとタッチ デバイスの両方でユーザー インタラクションを検出する一貫した方法を提供します。

クリック イベントとタッチスタート イベントを組み合わせることで、ドキュメントが確実に.click 関数は、入力方法に関係なくユーザー入力に応答します。このソリューションにより、ユーザーはマウスまたはタッチ入力を使用してドロップダウン メニューを切り替えることができ、シームレスなユーザー エクスペリエンスを実現します。

以上が「document.click」関数をデスクトップ デバイスとタッチ デバイスの両方で確実に動作させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。