orientationchange 事件触发滚动和调整大小事件

对于我正在从事的一个项目，我遇到了一个奇怪的问题，我无法在这里（或其他任何地方）找到答案。

我尝试创建一个 Fiddle 来演示发生的情况，但由于我的脚本的性质以及 jsfiddle 的功能方式，它无法正常工作。反正，这是小提琴的链接 http://jsfiddle.net/c_kick/Wcnef/所以至少你会有代码。

我想要发生什么

执行单个处理程序（onViewportChange）三种可能window事件：resize, orientationchange and scroll。根据事件类型，处理程序将确定要做什么。听起来很简单。

我做了什么

对于此示例，出于测试目的，我限制了处理程序以回显事件类型：

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

我将处理程序绑定到事件：（我也尝试过.bind()带有一系列事件和几个单独的绑定）

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

HTML 是完全空的，除了任意的基本元素（doctype、html、body，当然还有 jquery 和这个脚本）

实际发生了什么

现在事情变得很奇怪：这些事件在桌面浏览器上正常触发（主要是由于缺少orientationchange事件触发），但在移动设备上却不行（在iOS6+ iPad第三代和iOS6+ iPhone 5上测试）。当我旋转设备时；

• iPad 和 iPhone 都火力全开：orientationchange, resize其次是scroll
• iPhone 上的 Chrome 起火了resize其次是orientationchange
• 我借来的一部 Android 手机触发了orientationchange其次是resize

（请注意，由于竞争条件，事件的顺序可能不准确。）

这就是为什么我将它链接到orientationchange事件：当我删除orientationchange事件（离开resize and scroll）， 只有scroll事件在设备旋转时触发，但不再是resize event.

我不明白为什么所有事件都会同时发生。至少;我可以想象一个resize被触发orientationchange因为窗户尺寸改变了，但是scroll?

有谁知道为什么会发生这种情况？

edit我在这里设置了一个演示：http://beta.hnldesign.nl/orientation/index.html http://beta.hnldesign.nl/orientation/index.html

嗯，试试这个（摘自 jQuery API 文档...）http://api.jquery.com/on/ http://api.jquery.com/on/

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

这应该可行...也许你需要稍微调整一下代码