javascript - window.resize 事件在 Internet Explorer 中触发

Question

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

在我的应用程序中，这会导致讨厌的递归，因为在我的 window.resize 处理程序中我正在调整一些

元素的大小，这又会重新触发 window.resize 等。同样，这只是一个问题浏览器。

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

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

Answer 1

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

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

现在，当我设置附加的 div 的 LEFT css 属性时，window.resize 事件会无故触发。

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

没有修复的代码:

$(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;
});

所以基本上它会检查高度或宽度是否发生变化(只有当您实际调整窗口大小时才会发生)。