orientationchange event fires scroll and resize event

Question

Dla projektu, nad którym pracuję, wpadłem na dziwny problem, na który nie mogłem znaleźć odpowiedzi tutaj (ani nigdzie indziej).

Próbowałem stworzyć skrzypce, aby pokazać, co się dzieje, ale ze względu na naturę mojego skryptu i sposób działania jsfiddle nie działa poprawnie. W każdym razie, here's a link to the Fiddle, więc przynajmniej będziesz mieć kod.

Co chcę się zdarzyć

Wykonaj jedną obsługi (onViewportChange) na trzech możliwych window wydarzeń: resize, orientationchange i scroll. Na podstawie typu zdarzenia przewodnik pokaże, co zrobić. Brzmi całkiem prosto.

Co zrobiłem

W tym przykładzie, mam ograniczone do obsługi echo typ zdarzenia, dla celów testowych:

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

wiążę obsługi do zdarzeń: (mam próbowałem również .bind() z tablicą wydarzeń i kilku oddzielnych wiąże)

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

HTML jest complet Ely pusty, z wyjątkiem elementów arbitralne bazowych (doctype, html, ciała i oczywiście jQuery i ten skrypt)

Co dzieje

A teraz dostaje dziwne: wydarzenia ogień prawidłowo na przeglądarkach desktopowych (głównie w związku z brakiem wypalania zdarzeń orientacji), ale nie na urządzeniach mobilnych (testowane na iOS6 + iPad trzeciej generacji i iPhone iOS6 + 5). Kiedy obracam moje urządzenie (urządzenia);

• Ogień iPad i iPhone wszystkich trzech: orientationchange, resize następnie scroll
• Chrome na iPhone odpala resize następnie orientationchange
• telefonie z Androidem pożyczyłem wyzwala orientationchange następnie resize

(Zwróć uwagę, że kolejność zdarzeń może być niedokładna z powodu warunków wyścigu.)

A oto dlaczego to związane ze zdarzeniem orientationchange: Kiedy usunąć zdarzenie orientationchange (wyjazd resize i scroll), tylko zdarzenie scroll jest zwolniony na obrót urządzenia, ale nie zdarzenie resize.

Nie rozumiem, dlaczego wszystkie zdarzenia są uruchamiane natychmiast. Przynajmniej; Mogę sobie wyobrazić, że jest wyzwalane na orientationchange, ponieważ wymiary okna zmieniają się, ale scroll?

Czy ktoś wie, dlaczego tak się dzieje?

edit mam założyć demo tutaj: http://beta.hnldesign.nl/orientation/index.html

Answer 1

Hmmmm, spróbuj tego (wyciąg z jQuery docs API ...) http://api.jquery.com/on/

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

To powinno działać ... może musisz zmodyfikować kod nieco więcej