jquery – orientationchange事件触发scroll&resize事件

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

我尝试创建一个小提琴来演示会发生什么,但是由于我的脚本的性质以及jsfiddle的运行方式,它无法正常工作.无论如何,here’s a link to the Fiddle所以至少你会有代码.

我想要发生什么

在三个可能的窗口事件上执行单个处理程序(onViewportChange)：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,调整大小,然后滚动
> iPhone上的Chrome会调整大小,然后进行方向更改
>我借用的Android手机触发orientationchange然后调整大小

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

这就是为什么我将它链接到orientationchange事件：当我删除orientationchange事件(保留调整大小和滚动)时,只在设备轮换时触发滚动事件,但不再是resize事件.

我不明白为什么所有事件都会立即发生.至少;我可以想象,因为窗口尺寸会改变,但是滚动会在方向更改上触发调整大小？

有谁知道为什么会这样？

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

最佳答案

嗯,试试这个(从jQuery API docs中提取……)http://api.jquery.com/on/

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

这应该工作……也许你需要稍微调整一下代码

jquery – orientationchange事件触发scroll&resize事件

猜你在找的jQuery相关文章