Question

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

我尝试创建一个小提琴来演示会发生什么，但由于我的脚本的性质以及jsfiddle的运行方式，它无法正常工作。无论如何，here's a link to the 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和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事件。

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

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

orientationchange事件触发scroll＆amp;调整大小事件

1 个答案: