2013-01-04 27 views
5

私が取り組んでいるプロジェクトでは、奇妙な問題に遭遇しました。私はここで(または他の場所で)答えを見つけることができませんでした。orientationchangeイベントがスクロールしてイベントのサイズを変更します

何が起こるかを示すためにフィドルを作成しようとしましたが、スクリプトの性質とjsfiddleの機能のために正しく機能しません。とにかく、here's a link to the Fiddleなので、少なくともあなたはコードを持っています。 resizeorientationchangescroll:私は

は三つの可能なwindowイベントに単一のハンドラ(onViewportChange)を実行起こるしたい何

。イベントタイプに基づいて、ハンドラは何をすべきかを把握します。かなり簡単です。私はこの例では

をやった

、私はテスト目的のために、イベントの種類をエコーするハンドラが限られている:

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

私はイベントにハンドラをバインドします(私は持っていますまた、イベントの配列、およびいくつかの別個の結合)で.bind()を試み

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

HTMLでのcompletありますイベントは、主に(デスクトップブラウザ上に微細な火災:実際に

をたまたまそして今、それは奇妙な取得何

任意の基本要素(DOCTYPE、htmlの、身体とofcourseのjQueryと、このスクリプト)を除いて、エリー空(iOS6 + iPad 3世代およびiOS6 + iPhone 5でテストされた)モバイルデバイス上では実行されません。私は自分のデバイスを回転させます。

  • iPadとiPhone火災全て3:私は借りAndroid携帯電話がresize
続いorientationchangeをトリガーorientationchangeresize iPhone上scroll
  • クロムが続くが、orientationchange
  • によってresizeが続い発射

    (競合状態のため、イベントの順序が正確でない場合があります)

    そして、ここで私がorientationchangeイベントにそれをリンク理由です:私は(resizescrollを残す)orientationchangeイベントを削除すると、唯一のscrollイベントは、デバイスの回転に解雇、しかし、もはやresizeイベントです。

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

    これはなぜ起こっているのですか?

    編集は、私がここにデモを設定しました:http://beta.hnldesign.nl/orientation/index.html

  • +5

    'window.scrollTop'と' window.scrollLeft'の値が内部的に再構築/再評価されたとき、Mobile Safariは 'resize'イベントを引き起こします。回避策として 'scroll'イベントのトリガを避けるためにフラグを使うことができます。 – inhan

    +1

    私は、Safariがオリエンテーションが変更される前にページ上にあったポイントにスクロールしようとしているので、 'scroll'イベントが発生していると思います... – MassivePenguin

    +0

    どうもありがとうございます。しかし、スクロール 'と実際のユーザー'スクロール '? –

    答えて

    4
    これは動作するはず http://api.jquery.com/on/

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

    うーむ、これ(... jQueryのAPIドキュメントから抽出)してみてください...多分コードを少し微調整する必要があります

    関連する問題