方向更改事件触发滚动和调整大小事件 [英] orientationchange event fires scroll & resize event

问题描述

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

For a project I'm working on, I ran into a strange issue, for which I could not find an answer on here (or anywhere else).

我尝试创建一个Fiddle来演示会发生什么，但是由于我的脚本的性质以及jsfiddle的功能方式，它无法正常工作.无论如何，这是小提琴的链接，因此至少您会拥有代码.

I tried creating a Fiddle to demonstrate what happens, but due to the nature of my script, and the way jsfiddle functions, it is not working correctly. Anyway, here's a link to the Fiddle so at least you'll have the code.

我想发生的事情

对三个可能的window事件执行单个处理程序(onViewportChange):resize，orientationchange和scroll.根据事件类型，处理程序将弄清楚该怎么做.听起来很简单.

Execute a single handler (onViewportChange) on three possible window events: resize, orientationchange and scroll. Based on the event type, the handler will figure out what to do. Sounds pretty straightforward.

我做什么

在此示例中，为了进行测试，我将处理程序限制为回显事件类型:

For this example, I have limited the handler to echo the event type, for testing purposes:

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

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

I bind the handler to the events: (I have also tried .bind() with an array of events, and several separate binds)

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

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

The HTML is completely empty, except for the arbitrary base elements (doctype, html, body and ofcourse jquery and this script)

实际发生的情况

现在变得很奇怪:事件在桌面浏览器上正常运行(主要是由于缺少方向改变事件触发)，但在移动设备上却没有(在iOS6 + iPad第三代和iOS6 + iPhone 5上进行了测试).当我旋转设备时；

And now it gets weird: the events fire fine on desktop browsers (mainly due to the lack of an orientationchange event firing), but not on mobile devices (tested on an iOS6+ iPad 3rd generation and an iOS6+ iPhone 5). When I rotate my the device(s);

• iPad和iPhone会同时触发所有三个:orientationchange，resize，然后是scroll
• iPhone上的Chrome依次触发resize和orientationchange
• 我借用的Android手机会触发orientationchange，然后触发resize

• The iPad and iPhone fire all three: orientationchange, resize followed by scroll
• Chrome on the iPhone fires resize followed by orientationchange
• An Android phone I borrowed triggers orientationchange followed by resize

(请注意，由于比赛条件，比赛的顺序可能不准确.)

(Note that the order of events may not be accurate because of race conditions.)

这就是我将其链接到orientationchange事件的原因:当删除orientationchange事件(保留resize和scroll)时，仅在设备旋转时触发scroll事件，但没有resize事件的时间更长.

And here's why I linked it to the orientationchange event: When I remove the orientationchange event (leaving resize and scroll), only the scroll event is fired on a device rotation, but no longer the resize event.

我不明白为什么所有事件都立即触发.至少;我可以想象resize在orientationchange上触发，因为窗口尺寸发生了变化，但是scroll?

I don't understand why all events fire at once. At least; I can imagine that a resize is triggered on an orientationchange because the window dimensions change, but a scroll?

有人知道为什么会这样吗?

Does anyone know why this is happening?

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

edit I've set up a demo here: http://beta.hnldesign.nl/orientation/index.html

推荐答案

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

Hmmmm, try this (extracted from 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);
  }
});

这应该可行...也许您需要对代码进行一些调整

This should work... maybe you need to tweak the code a little bit more

这篇关于方向更改事件触发滚动和调整大小事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！