在Internet Explorer中触发window.resize事件

Question

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

在我的应用程序中,这导致了一个讨厌的递归,因为在我的window.resize处理程序中我正在调整一些<li>元素,这反过来会重新触发window.resize等.再次,这只是IE中的一个问题.

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

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

Answer 1

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

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

现在,当我设置附加div的LEFT css属性时,window.resize事件获取NO GOOD REASON的触发器.

它导致无限循环,一次又一次地触发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;
});

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

Answer 2

这对我来说很有意义,似乎适用于IE7及以上版本:

    //variables to confirm window height and width
    var lastWindowHeight = $(window).height();
    var lastWindowWidth = $(window).width();

    $(window).resize(function() {

        //confirm window was actually resized
        if($(window).height()!=lastWindowHeight || $(window).width()!=lastWindowWidth){

            //set this windows size
            lastWindowHeight = $(window).height();
            lastWindowWidth = $(window).width();

            //call my function
            myfunction();


        }
    });

Answer 3

将你的resize侦听器绑定,.one()以便在触发后解除绑定.然后你可以做任何你想做的事情,只要最后你重新调整resize监听器.我发现最简单的方法是将resize监听器放在一个匿名函数中,如下所示:

var resizeListener = function(){
  $(window).one("resize",function(){ //unbinds itself every time it fires

    //resize things

    setTimeout(resizeListener,100); //rebinds itself after 100ms
  });
}
resizeListener();

你在技术上并不需要setTimeout缠绕resizeListener()它,但我把它扔在那里作为一个只是在案件和一些额外的节流.

Answer 4

我通过解除调整大小函数,重建页面然后再次绑定调整大小函数来解决它:

function rebuild() {
   $(window).unbind('resize');
   /* do stuff here */
   $(window).bind('resize',rebuild);
}

$(window).bind('resize',rebuild);

编辑

绑定和解绑不适合IE8.虽然微软甚至放弃了IE8,你可能想尝试这个(未经测试!):

function rebuild(){
   if(!window.resizing) return false;
   window.resizing=true;
   /* do stuff here */
   window.resizing=false;
}

window.resizing=false;
document.body.onresize=rebuild;

Answer 5

当元素调整大小时，我无法触发调整大小事件（尽管仅在 IE8 中尝试过）。

target但是，当您遇到此问题时，事件对象上的内容是什么，您可以执行以下操作：

$(window).resize(function(e) {
    if( e.target != window ) return;
    // your stuff here
});