5

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

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

我想要发生的事情

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 和当然 jquery 和这个脚本）

实际发生了什么

现在变得奇怪了：这些事件在桌面浏览器上触发得很好（主要是因为没有触发orientationchange 事件），但在移动设备上却没有（在iOS6+ iPad 第三代和iOS6+ iPhone 5 上测试）。当我旋转我的设备时；

  • iPad 和 iPhone 三个都火了：orientationchange，resize紧随其后scroll
  • iPhone 上的 Chrome 起火resize了orientationchange
  • 我借用的 Android 手机触发器orientationchange，然后resize

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

这就是我将它链接到orientationchange事件的原因：当我删除orientationchange事件（离开resize和scroll）时，只有scroll事件在设备旋转时被触发，但不再是resize事件。

我不明白为什么所有事件都会同时触发。至少; 我可以想象 aresize是在 an 上触发的，orientationchange因为窗口尺寸发生了变化，但是 a scroll?

有谁知道为什么会这样？

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

4

1 回答 1

4

嗯，试试这个（从 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-23T21:27:10.563 回答