HTML onresizeend事件，或者检测调整大小结束的等效方法

Question

HTML onresizeend事件，或者检测调整大小结束的等效方法

4

我正在尝试检测浏览器中的onresize事件何时结束。如果使用onresize事件，在Firefox中它似乎只会在调整大小事件结束后触发一次，这正是我想要的。但是，如果在IE中尝试，则onresize事件在调整大小期间会被多次触发。

我还尝试了MSDN中宣传的onresizeend事件。但看起来它根本不会在Firefox或IE中触发。我使用以下代码：

<html>
    <head>
        <script>
        <!--
        function doLog(message)
        {
            document.getElementById("log").innerHTML += "<br/>" + message;
        }
        
        function doResize()
        {
            doLog("plain resize");
        }

        function doResizeEnd()
        {
            doLog("resize end");
        }
        -->
        </script>
        <style>
        <!--
        #log {
            width: 400px;
            height: 600px;
            overflow: auto;
            border: 1px solid black;
        }
        -->
        </style>
    </head>
    <body onresize="doResize();" onresizeend="doResizeEnd();">
        <div id="log"/>
    </body>
</html>

有什么想法，为什么这个不起作用？也许onresizeend事件不被支持了？如果是这种情况，我该如何检测到resize事件已经结束？

- Gabi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RoBorg · Accepted Answer

来自MSDN onresizeend()

只有可编辑内容对象才能包含在控件选定范围内。您可以通过将contentEditable属性设置为true或将父文档置于设计模式来使对象可编辑。

这就解释了为什么它对您没有触发。我猜想您不想启用contentEditable，那么为什么不设置一个计时器呢。

var resizeTimer = 0;
function doResize()
{
    if (resizeTimer)
        clearTimeout(resizeTimer);

    resizeTimer = setTimeout(doResizeEnd, 500);
}

虽然不完美，但希望足够好。