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

Question

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

我尝试创建一个 Fiddle 来演示会发生什么，但由于我的脚本的性质以及 jsfiddle 的功能方式，它无法正常工作。无论如何，here's a link to the Fiddle所以至少你会有代码。

我想要发生什么

对三个可能的 window 事件执行单个处理程序 (onViewportChange):resize、orientationchange 和 滚动。根据事件类型，处理程序将确定要做什么。听起来很简单。

我做了什么

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

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

我将处理程序绑定(bind)到事件:(我还尝试使用事件数组和几个单独的绑定(bind)来尝试 .bind())

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

除了任意基本元素(doctype、html、body，当然还有 jquery 和此脚本)之外，HTML 完全是空的

实际发生的情况

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

• iPad 和 iPhone 会触发所有三个操作:orientationchange、resize，然后是 scroll
• iPhone 上的 Chrome 会触发 resize，然后触发 orientationchange
• 我借来的 Android 手机触发 orientationchange，然后触发 resize

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

这就是我将其链接到 orientationchange 事件的原因:当我删除 orientationchange 事件时(留下 resize 和 scroll)，设备旋转时仅触发 scroll 事件，而不再触发 resize 事件。

我不明白为什么所有事件都会同时触发。至少;我可以想象，由于窗口尺寸发生变化，resize 会在 orientationchange 上触发，但是 scroll 呢？

有谁知道为什么会这样吗？

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

Answer 1

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

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

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