0

jQuery Mobile と PhoneGap を使用してアプリを作成しています。

「タップ」でボタンを「委任」して、重い処理を実行し、読み込みスピナーを表示します。ユーザーがアプリをタップし続けると、タップはキューに入れられ、重い処理が完了した後にアプリによって処理されるようになり、不要なものをクリックしてしまいます。

どうすればこれを防ぐことができますか?

(私が理解していることから、これらは新しいユーザー イベントであるため、stopImmediatePropagation は役に立ちません。)

ありがとう

4

3 に答える 3

1

ページ全体でタップを非アクティブにするには、ページ全体を透明な div でオーバーレイできます。境界線上のハックと見なされるかもしれませんが、これは実際には最小限の js と css を使用します!

注意点は、ページが非アクティブであることを視覚的に示すものではないということです。

これを行うには、オーバーレイに半透明のグレーを使用するか、以下で行ったように読み込みメッセージを表示します。

まず最初に、CSS について少し説明します
。div でページ全体をカバーするには、幅と高さを 100% に設定します。正しく配置するには、position:absolute を使用し、透明な背景には rgba background-color プロパティを使用します (以下を参照)。また、z-index (必要に応じて増やすことができます) を宣言して、それが他のすべての上にあることを確認し、-webkit-tap-highlight-color プロパティを使用してタップ コールアウトを削除する必要があります。表示をなしに設定し、重いものを持ち上げているときに表示します。

うまくいけば物事を解決するjsfiddleを作成しました。

ここでは、上記のプロパティを備えた「inactivator」という ID を持つ div を作成しました。また、jQuery の表示機能を委譲した "inactivate" という ID を持つボタンも作成しました。また、jQuery Mobile のデフォルトの読み込みメッセージを同時に表示するように自由に追加して、アプリの思考を視覚的に示すこともできました (遅延と間違われないように)。

ここでは、タイムアウト機能を追加して、読み込みメッセージと「非アクティブ化」が 5 秒後に非表示になるようにしました。明らかに、あなたの場合、5秒後ではなく、「重い処理」の完了時に同じコードを起動する必要があります。

（質問を正しく理解できなかったため、新しい追加の回答ですが、古い回答は他の人に役立つ可能性があります。）

于 2012-06-21T03:38:34.513 に答える
0

そのため、理解するのに時間がかかりました...イベントを無視するには、親要素のデリゲート関数から FALSE を返す必要があります。以下の return false 行は私の問題を修正します:

$(document).delegate("#finish", "tap", onFinish);

var onFinish = function() {
    $.mobile.loadingMessage = "Finishing...";
    $.mobile.showPageLoadingMsg();

    setTimeout(function(){  
        HEAVYPROCESSING();
        $.mobile.changePage($("#choosearticle"));
        }, 50);

    return false; // important - stops the two click fall through problem!
}
于 2012-07-03T10:56:37.077 に答える