私が取り組んでいるプロジェクトで、奇妙な問題に遭遇しました。ここ(または他の場所)で答えを見つけることができませんでした。
何が起こるかを示すためにFiddleを作成しようとしましたが、スクリプトの性質とjsfiddleの機能により、正しく機能していません。とにかく、ここにフィドルへのリンクがあるので、少なくともコードはあります。
私がしたいこと
、、およびonViewportChange
の3つの可能なwindow
イベントに対して単一のハンドラー()を実行します。イベントタイプに基づいて、ハンドラーは何をすべきかを判断します。かなり簡単に聞こえます。resize
orientationchange
scroll
私がしたこと
この例では、テスト目的で、イベントタイプをエコーするようにハンドラーを制限しました。
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
(とを離れる)、デバイスのローテーションでイベントのみが発生し、イベントは発生しなくなります。resize
scroll
scroll
resize
すべてのイベントが一度に発生する理由がわかりません。少なくとも; ウィンドウのサイズが変わるためにaresize
がトリガーされることは想像できますが、 ?orientationchange
scroll
なぜこれが起こっているのか誰かが知っていますか?
編集ここでデモを設定しました:http://beta.hnldesign.nl/orientation/index.html