他の誰かが JQuery Mobile でこれを経験したかどうかはわかりませんが、何らかの理由で、絶対配置 DIV と固定ヘッダーの下にある要素がモバイル デバイスでクリック/タップをインターセプトするのを防ぐことができません。
たとえば、長いスクロール リストに連絡先を一覧表示するページがあります。そのページには、ボタン付きのフローティング ヘッダーがあります。リストを下にスクロールしてフローティング ヘッダーのボタンをクリックすると、ヘッダーの下にあるために視覚的に見えなくても、ヘッダーの下にある連絡先にクリックが渡されます。
ヘッダーのボタンをクリックしても、ボタンがトリガーされることはありません。その下にあるリスト要素が常に起動します。ただし、ヘッダーの下に何もないようにリストをスクロールすると、通常どおりヘッダーのボタンをクリックできます。
これまでのところ、私は試しました: - ヘッダーのボタンの event.stopPropagation()。ただし、これは決して発火しませんでした。下の要素は常にフォーカスを盗む
クリック イベントの Y 座標を検出します。座標がフローティング ヘッダーの高さよりも小さい場合は、クリック アクションを中止します。ただし、これも機能しませんでした-「return true;」を実行した後、ボタンのクリックハンドラーは起動しませんでした。
視覚的には既に正しい場合でも、フローティング ヘッダーとリスト アイテム コンテナーに z-index を設定します。
私はかなり困惑しています。テストベッドを作成しようとしましたが、そこで正しく動作します。JQM デモ サイトでも正しく動作するため、アプリの CSS または構造に関するものである必要があります。フローティング要素が正しく表示される原因は考えられませんが、その下にタップ可能なものがない場合にのみタップ可能になります。
どんなアイデアでも大歓迎です!