orientationchange事件触发scroll&resize事件

Question

对于我正在进行的项目,我遇到了一个奇怪的问题,我在这里(或其他任何地方)找不到答案.

我尝试创建一个小提琴来演示会发生什么,但是由于我的脚本的性质以及jsfiddle的运行方式,它无法正常工作.无论如何,这里是一个指向小提琴的链接,所以至少你会得到代码.

我想要发生什么

执行单个处理器(onViewportChange三个可能的)window事件:resize,orientationchange和scroll.根据事件类型,处理程序将确定要执行的操作.听起来很简单.

我做了什么

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

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

我将处理程序绑定到事件:(我还尝试.bind()了一系列事件,以及几个单独的绑定)

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

HTML是完全空的,除了任意基本元素(doctype,html,body和ofcourse jquery和这个脚本)

实际发生了什么

现在它变得奇怪了:桌面浏览器上的事件很好(主要是由于缺少方向更改事件触发),但在移动设备上没有(在iOS6 + iPad第3代和iOS6 + iPhone 5上测试).当我旋转设备时;

• iPad和iPhone火三个:orientationchange,resize其次是scroll
• iPhone上的Chrome resize随后闪现orientationchange
• 我借用的Android手机触发orientationchange后跟resize

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

这就是为什么我将它链接到orientationchange事件:当我删除orientationchange事件(离开resize和scroll)时,只有scroll事件在设备轮换时触发,但不再是resize事件.

我不明白为什么所有事件都会立即发生.至少; 我可以想象a 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);
  }
});

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