4

主要なブラウザー (Safari、Chrome、Dolphin、Opera) をすべて念頭に置いて、モバイル Web サイトを設計しています。

ページが移動/変更/新しいページが要求されたときに、「読み込み中」要素を表示したい。

アンカータグには多くのものが存在するため、クリックイベントを使用できませんpreventDefault();。

私は次のことを試しました：

$(window).on('beforeunload', function() { ... });

ただし、 DolphinやOperaでは機能しません。

誰かがクロスブラウザのソリューションを提案できますか?

--

編集：質問をするのがあまり明確ではなかったことに気づきました、お詫びします。ここでフィドルを作成しました- http://jsfiddle.net/hiteshpachpor/7dadA/5/応答に基づいて。この例では、イベントのバブリングを利用しています。

今ここに私が直面している問題があります。$('.jacket').show();ページが変更/ナビゲートされるたびに、そのローダー（）を表示します。しかし、リンクがクリックされた場合に表示されたくありません。代わりに、自分のページで他の操作を行いたいです。今、$('.jacket').hide();そのようなすべてのアクションに行を追加するだけで十分ですが、スケーリングの理由からはあまり理想的ではありません.

これが私が'beforeunload'メソッドを評価していた理由ですが、クロスブラウザー互換性がないため、うまくいきませんでした。

この問題に取り組むための提案はありますか？

4

5 に答える 5

0

body 要素に onLoad 関数を配置して、読み込み中の div を呼び出して表示し、次に setTimeout を指定して 3 秒後に読み込み中の div を非表示にし、他のすべての div/残りの本体を表示することができます。

編集:これはすべてのブラウザーで機能すると確信しています。コンピューターにアクセスしたら (今は携帯電話に) コード スニペットを添付します ;)

于 2014-04-26T14:37:11.203 に答える
0

コメントで述べたように。ただし、dom 全体にイベントをアタッチするよりも、イベント委任を好みます。

// this is your original eventListener which prevents the default action (aka, navigating away)
$('#random-link').click(function(event){
    event.preventDefault();
    $('#result').text('I was clicked from random-link event.')
});

// this would be the delegated listener. It wouldn't have to be all "a" tags 
// that you respond to. It could be any css selector that causes the 
// loading message that you want.
$(window).on('click', 'a', function() {
   alert('I still bubble up.');
});

アップデート：

$('.jacket').show()おそらく、「リンク」をトリガーするべきではありません。

$('.jacket').hide();

$('a:not(.prevent)').click(function() {
    $('.jacket').show();
});

$('.prevent').click(function(event) {
    event.preventDefault();
    $('.jacket').hide();
});
于 2014-04-27T17:14:19.087 に答える