在 Internet Explorer 中触发 window.resize 事件 [英] window.resize event firing in Internet Explorer

问题描述

如您所知，在 Internet Explorer 中，当页面上的任何元素调整大小时都会触发 window.resize 事件.页面元素是否通过分配/更改其大小来调整大小无关紧要height 或 style 属性，通过简单地向其添加子元素或其他任何方式 - 即使元素调整大小不会影响视口本身的尺寸.

As you are aware, in Internet Explorer, the window.resize event is fired when any element on the page is resized. It does not matter whether the page element is resized through assigning/changing its height or style attribute, by simply adding a child element to it, or whatever -- even though the element resizing does not affect the dimensions of the viewport itself.

在我的应用程序中，这导致了令人讨厌的递归，因为在我的 window.resize 处理程序中，我正在调整一些 <li>元素，这又会重新触发 window.resize 等.同样，这只是 IE 中的一个问题.

In my application, this is causing a nasty recursion, since in my window.resize handler I am resizing some <li> elements, which in turn re-fires window.resize, etc. Again, this is only a problem in IE.

有什么方法可以防止 window.resize 在响应页面上的元素被调整大小时在 IE 中触发?

我还应该提到我正在使用 jQuery.

I should also mention that I'm using jQuery.

推荐答案

我刚刚发现了另一个可能对您有帮助的问题.

I just discovered another problem which might help you.

我正在使用 jQuery 并且我有 window.resize 事件来调用一个函数，该函数将重新定位附加到正文的 div.

I am using jQuery and I have window.resize event to call a function which will re-position the div appended to the body.

现在，当我设置该附加 div 的 LEFT css 属性时，window.resize 事件会因没有正当理由而触发.

Now when I set the LEFT css property of that appended div, the window.resize event get trigger for NO GOOD REASON.

这会导致无限循环，一次又一次地触发 window.resize.

It results in an infinite loop, triggering the window.resize again and again.

$(window).resize(function(){
    var onResize = function(){
        //The method which alter some css properties triggers 
        //window.resize again and it ends in an infinite loop
        someMethod();
    }
    window.clearTimeout(resizeTimeout);
    resizeTimeout = window.setTimeout(onResize, 10);
});

解决方案:

var winWidth = $(window).width(),
    winHeight = $(window).height();

$(window).resize(function(){
    var onResize = function(){
        //The method which alter some css properties triggers 
        //window.resize again and it ends in an infinite loop
        someMethod();
    }

    //New height and width
    var winNewWidth = $(window).width(),
        winNewHeight = $(window).height();

    // compare the new height and width with old one
    if(winWidth!=winNewWidth || winHeight!=winNewHeight){
        window.clearTimeout(resizeTimeout);
        resizeTimeout = window.setTimeout(onResize, 10);
    }
    //Update the width and height
    winWidth = winNewWidth;
    winHeight = winNewHeight;
});

所以基本上它会检查高度或宽度是否改变(这只会在你实际调整窗口大小时发生).

So basically it will check if the height or width is changed (which will happen ONLY when you actually resize with window).

这篇关于在 Internet Explorer 中触发 window.resize 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！