Dla projektu, nad którym pracuję, wpadłem na dziwny problem, na który nie mogłem znaleźć odpowiedzi tutaj (ani nigdzie indziej).orientationchange event fires scroll and resize event
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ępniescroll
- Chrome na iPhone odpala
resize
następnieorientationchange
- telefonie z Androidem pożyczyłem wyzwala
orientationchange
następnieresize
(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
Wygląda na to, że Mobile Safari uruchamia zdarzenie 'resize', gdy wartości' window.scrollTop' i 'window.scrollLeft' są ponownie odtwarzane/reewaluowane wewnętrznie. Możesz użyć flagi, aby uniknąć wyzwalania zdarzenia 'scroll' jako obejścia. – inhan
Wyobrażam sobie, że uruchamiane jest zdarzenie 'scroll', ponieważ Safari próbuje przewinąć użytkownika do punktu, w którym znajdował się na stronie przed zmianą orientacji ... – MassivePenguin
Dzięki inhan, ale jak będę rozróżniać ponowną ocenę? przewijanie "i rzeczywisty użytkownik" przewijanie "? –