为什么 IE8 在 jquery window.resize 事件上挂起？答案

【问题标题】：Why does IE8 hangs on jquery window.resize event?为什么 IE8 在 jquery window.resize 事件上挂起？
【发布时间】：2011-08-22 06:57:40
【问题描述】：

我发现在 IE8 中打开一段 html 和 javascript 时似乎总是会重现的问题。

<html>
    <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(window).resize(function() {
                console.log('Handler for .resize() called');
            });
        });
    </script>
    <div id="log">
    </div>
    </body>
</html>

在 IE8 中加载此文件并打开开发者工具会显示在浏览器窗口大小调整一次后连续打印日志消息。

有人知道为什么吗？这不会发生在 IE7 或 IE9 中，也不会发生在其他浏览器（或至少是它们的最新版本）中。

更新

如果浏览器是 IE8，防止 resize() 连续触发的一种解决方案是在 document.body.onresize 上添加处理程序。

 var ieVersion = getInternetExplorerVersion();
    if (ieVersion == 8) {
        document.body.onresize = function () {
        };
    }
    else {
        $(window).resize(function () {
        });
    }

但这并不能回答我的问题：resize() 的连续触发是 IE8 中的错误吗？

【问题讨论】：

无法在 IE8 中使用此 fiddel 重现此问题：jsfiddle.net/hrtp8

标签： javascript jquery html internet-explorer resize

【解决方案1】：

如果页面上的元素被调整大小 (as described in this question)，我只会看到您描述的问题。您的示例对我不起作用，但我假设您将控制台消息附加到您那里的 log div 中，这意味着它正在调整 div 的大小并触发窗口调整大小事件。

李给出的答案是正确的，但链接中的方法对我不起作用。这是我所做的：

var handleResize = function(){
   $(window).one("resize", function() {
      console.log('Handler for .resize() called');
      setTimeout("handleResize()",100);
   });
}
handleResize();

这样，处理程序在触发后立即解除绑定，并且仅在您完成所有可能重新触发页面调整大小的操作后重新绑定。我投入了一个 setTimeout 来提供额外的限制。如果您的脚本需要更多时间，请增加该值。

【讨论】：

【解决方案2】：

如果打开“拖动时显示窗口内容”，您将被调整大小事件淹没。我猜您是在启用了此效果的单独 Windows 机器上测试 IE8（显示属性 -> 外观 -> 效果...）。

为了解决这个问题，您可以包装和捕获调整大小事件以驯服它们：http://paulirish.com/demo/resize

这篇文章说 Chrome、Safari 和 Opera 也受此影响。

【讨论】：