orientationchange事件觸發滾動和調整大小事件

對於我正在處理的項目，我遇到了一個奇怪的問題，爲此我無法在此處（或其他任何地方）找到答案。orientationchange事件觸發滾動和調整大小事件

我試着創建一個小提琴演示會發生什麼，但由於我的腳本的性質，以及jsfiddle函數的方式，它無法正常工作。無論如何，here's a link to the Fiddle所以至少你會有代碼。

我希望發生

三個可能window事件執行單一處理器（onViewportChange）什麼：resize，orientationchange和scroll。根據事件類型，處理程序將找出要執行的操作。聽起來很簡單。

我做什麼

在這個例子中，我已經限制了處理程序，以呼應事件類型，用於測試目的：

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

我處理程序綁定到事件：（我有也試圖用.bind()事件的陣列，和幾個單獨的綁定）

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

的HTML是結束於伊利空的，除了任意基本元素（文檔類型，HTML，身體和ofcourse jQuery和這個腳本）

實際發生的

現在這樣會很奇怪：事件觸發在桌面瀏覽器罰款（主要是由於缺少orientationchange事件觸發），但不在移動設備上（在iOS6 + iPad第三代和iOS6 + iPhone 5上測試）。當我旋轉我的設備時;

iPad和iPhone火三個：orientationchange，resize其次scroll
瀏覽器在iPhone上觸發resize其次orientationchange
Android手機，我借觸發之後resize

orientationchange

（請注意，由於競賽條件，事件的順序可能不準確。）

這裏就是爲什麼我把它掛orientationchange事件：當我刪除orientationchange事件（離開resize和scroll），只有scroll事件上的設備旋轉解僱，但不再是resize事件。

我不明白爲什麼所有的事件一次激發。至少;我可以想象一個resize在orientationchange上被觸發，因爲窗口尺寸改變了，但是scroll？

有誰知道爲什麼會發生這種情況？

編輯我已經設置了演示在這裏：http://beta.hnldesign.nl/orientation/index.html

來源

2013-01-04 c_kick

顯然移動Safari瀏覽器觸發'resize'事件時'window.scrollTop'和'window.scrollLeft'值reconstucted /內部重新評估的代碼。您可以使用標誌來避免觸發'scroll'事件作爲解決方法。 – inhan

我想象一個'scroll'事件正在被解僱，因爲Safari試圖將用戶滾動到他們在頁面上的方向被改變之前的位置...... – MassivePenguin

感謝inhan，但是我將如何區分重新評估'滾動'和實際用戶'滾動'？ –

Hmmmm，試試這個（從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-23 21:27:10 Guillermo

orientationchange事件觸發滾動和調整大小事件

回答

相關問題