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つすべてを起動します：orientationchange、resize続いて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 に答える