5

他の誰かが JQuery Mobile でこれを経験したかどうかはわかりませんが、何らかの理由で、絶対配置 DIV と固定ヘッダーの下にある要素がモバイル デバイスでクリック/タップをインターセプトするのを防ぐことができません。

たとえば、長いスクロール リストに連絡先を一覧表示するページがあります。そのページには、ボタン付きのフローティング ヘッダーがあります。リストを下にスクロールしてフローティング ヘッダーのボタンをクリックすると、ヘッダーの下にあるために視覚的に見えなくても、ヘッダーの下にある連絡先にクリックが渡されます。

ヘッダーのボタンをクリックしても、ボタンがトリガーされることはありません。その下にあるリスト要素が常に起動します。ただし、ヘッダーの下に何もないようにリストをスクロールすると、通常どおりヘッダーのボタンをクリックできます。

これまでのところ、私は試しました: - ヘッダーのボタンの event.stopPropagation()。ただし、これは決して発火しませんでした。下の要素は常にフォーカスを盗む

  • クリック イベントの Y 座標を検出します。座標がフローティング ヘッダーの高さよりも小さい場合は、クリック アクションを中止します。ただし、これも機能しませんでした-「return true;」を実行した後、ボタンのクリックハンドラーは起動しませんでした。

  • 視覚的には既に正しい場合でも、フローティング ヘッダーとリスト アイテム コンテナーに z-index を設定します。

私はかなり困惑しています。テストベッドを作成しようとしましたが、そこで正しく動作します。JQM デモ サイトでも正しく動作するため、アプリの CSS または構造に関するものである必要があります。フローティング要素が正しく表示される原因は考えられませんが、その下にタップ可能なものがない場合にのみタップ可能になります。

どんなアイデアでも大歓迎です！

4

3 に答える 3

2

排除の長いプロセスを経て、これを理解しました。JQM 1.3 で導入された新しい「パネル」は、モバイル デバイスの固定ヘッダーで問題を引き起こします。ヘッダーが視覚的には上にある場合でも、ヘッダーの z-index がその下にあるものよりも低いかのように、ヘッダーのクリックは無視されます。

ui-panel-content-wrap DIV からすべてのクラスをはぎ取ることで問題を発見しました

var wrapper = $(".ui-panel-content-wrap");
$(wrapper).removeClass('ui-body-c').removeClass('ui-panel-animate').removeClass('ui-panel-content-wrap-closed').removeClass('ui-panel-content-wrap');

これを行うと、もちろんパネルが壊れましたが、固定ヘッダーは再び適切にクリック可能になりました。

そこから、「ui-panel-content-wrap」が問題であることがわかるまで、各クラスを再紹介しました。私はそれをこれまでたどりました：

/* hardware acceleration for smoother transitions on WebKit browsers */
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal),
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) > div,
.ui-panel-animate.ui-panel-closed.ui-panel-display-reveal > div,
.ui-panel-animate.ui-panel-content-wrap,
.ui-panel-animate.ui-panel-content-fixed-toolbar {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
}

-webkit-transform をコメントアウトまたはオーバーライドする場合: translate3d(0,0,0); 固定ヘッダーはイベントのトラップを開始します。

于 2013-09-19T17:09:49.597 に答える
1

私はちょうど同じ問題を抱えていました（ヘッダーにはありませんが）。他の誰かがそのページにアクセスした場合の記録として。z-index: 1;タップした要素に適用すると解決しました。タップが認識されるようになりました。

于 2013-12-16T22:22:29.053 に答える