2008-11-10 10 views
4

J'essaie de détecter quand l'événement onresize se termine dans un navigateur. Si j'utilise l'événement "onresize", dans Firefox, il semble être déclenché une seule fois, après la fin de l'événement de redimensionnement, ce qui est exactement ce que je veux. Mais si j'essaie dans IE, l'événement "onresize" se déclenche plusieurs fois pendant le redimensionnement.html événement onresizeend, ou moyen équivalent pour détecter la fin du redimensionnement

J'essaie également l'événement "onresizeend", annoncé dans MSDN. Mais il ne semble pas être tiré du tout, ni dans FF, ni dans IE. J'utilise le code suivant:

<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> 

Des idées pour lesquelles cela ne fonctionne pas? Peut-être que l'événement "onresizeend" n'est pas supporté? Dans ce cas, comment puis-je détecter la fin de l'événement de redimensionnement?

Merci.

Répondre

5

De MSDN onresizeend()

contenu Seuls les objets modifiables peuvent être inclus dans une sélection de contrôle. peut rendre le contenu des objets modifiable par en définissant la propriété contentEditable sur true ou en plaçant le document parent en mode conception.

Cela explique pourquoi il ne se déclenche pas pour vous. Je suppose que vous ne voulez pas activer contentEditable, alors pourquoi ne pas définir une minuterie.

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

    resizeTimer = setTimeout(doResizeEnd, 500); 
} 

Ce n'est pas parfait mais j'espère que ce sera suffisant.

+0

Était sur le point de poster le même :) –

+1

Bonne réponse. Notez que 'clearTimeout (x)' ne change en fait pas la valeur booléenne de x, qui retournera donc vrai, qu'il ait été effacé ou non; 'clearTimeout' peut également être passé n'importe quoi sans erreur. 'if (resizeTimer)' est donc redondant ici. –