5

私が取り組んでいるプロジェクトで、奇妙な問題に遭遇しました。ここ(または他の場所)で答えを見つけることができませんでした。

何が起こるかを示すためにFiddleを作成しようとしましたが、スクリプトの性質とjsfiddleの機能により、正しく機能していません。とにかく、ここにフィドルへのリンクがあるので、少なくともコードはあります。

私がしたいこと

、、およびonViewportChangeの3つの可能なwindowイベントに対して単一のハンドラー()を実行します。イベントタイプに基づいて、ハンドラーは何をすべきかを判断します。かなり簡単に聞こえます。resizeorientationchangescroll

私がしたこと

この例では、テスト目的で、イベントタイプをエコーするようにハンドラーを制限しました。

var onViewportChange = function(e) {
    alert(e.type);
};

ハンドラーをイベントにバインドします:(イベント.bind()の配列といくつかの個別のバインドも試しました)

$(window).on({
    'orientationchange resize scroll' : function(e){
        onViewportChange(e);
    }
});

任意の基本要素(doctype、html、body、およびもちろんjqueryとこのスクリプト)を除いて、HTMLは完全に空です。

実際に何が起こるか

そして今、それは奇妙になります:イベントはデスクトップブラウザで正常に発生しますが(主にorientationchangeイベントが発生しないため)、モバイルデバイスでは発生しません(iOS6+iPad第3世代およびiOS6+iPhone 5でテスト済み)。デバイスを回転させると、

  • iPadとiPhoneは3つすべてを起動します:orientationchangeresize続いてscroll
  • iPhoneのChromeが起動し、resize続いてorientationchange
  • 私が借りたAndroid携帯はトリガーorientationchangeに続いてresize

(競合状態のため、イベントの順序が正確でない場合があることに注意してください。)

そして、これがイベントにリンクした理由ですorientationchange。イベントを削除するとorientationchange(とを離れる)、デバイスのローテーションでイベントのみが発生し、イベントは発生しなくなります。resizescrollscrollresize

すべてのイベントが一度に発生する理由がわかりません。少なくとも; ウィンドウのサイズが変わるためにaresizeがトリガーされることは想像できますが、 ?orientationchangescroll

なぜこれが起こっているのか誰かが知っていますか?

編集ここでデモを設定しました:http://beta.hnldesign.nl/orientation/index.html

4

1 に答える 1

4

うーん、これを試してください(jQuery APIドキュメントから抽出...)http://api.jquery.com/on/

$(window).on({
  orientationchange: function(e) {
    onViewportChange(e);
  }, resize: function(e) {
    onViewportChange(e);
  }, scroll: function(e) {
    onViewportChange(e);
  }
});

これでうまくいくはずです...コードをもう少し調整する必要があるかもしれません

于 2013-09-23T21:27:10.563 に答える