html onresizeend事件,或检测调整大小结束的等效方法

Question

html onresizeend事件,或检测调整大小结束的等效方法

Gab*_*iel 4 html events javascript-events

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

我也尝试在MSDN上做广告的"onresizeend"事件.但它似乎根本没有被解雇,无论是在FF还是在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>

Run Code Online (Sandbox Code Playgroud)

任何想法为什么这不起作用？也许不支持"onresizeend"事件？在这种情况下,如何检测调整大小事件何时结束？

谢谢.

Answer 1

Gre*_*reg 5

来自MSDN onresizeend()

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

这就解释了为什么它不会为你开火.我怀疑你不想启用contentEditable,所以为什么不设置一个计时器.

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

    resizeTimer = setTimeout(doResizeEnd, 500);
}

Run Code Online (Sandbox Code Playgroud)

它并不完美,但希望会足够好.

好答案.注意`clearTimeout(x)`实际上并没有改变x的布尔值,因此无论它是否被清除,它都将返回true; `clearTimeout`也可以无错误地传递给任何东西.因此,if(resizeTimer)`在这里是多余的. (2认同)

归档时间：	16 年，11 月前
查看次数：	9662 次
最近记录：	16 年，11 月前