Tengo el siguiente código que ajusta el tamaño de dos paneles, uno encima del otro. Mueva el mouse hacia arriba y el panel superior se hará más pequeño mientras que el panel inferior se hará más grande. Todo parece funcionar lo suficientemente bien, sin embargo, en mouseup, aunque la línea 'clearInterval' parece ejecutarse, 'interval' no se restablece y el movimiento del mouse todavía altera los tamaños del panel.

¿Alguien puede señalar dónde me equivoqué o indicar una mejor manera de hacerlo?

Gracias por adelantado.

 document.addEventListener('DOMContentLoaded',function(event){ document.querySelector('#partition').onmousedown = function(event){ //Set a timer to check every millisecond the position of the mouse and asign that position to the panels var interval=setInterval(function(){ onmousemove = function(e){ document.getElementById('topPanel').style.height = e.clientY; document.getElementById('btmPanel').style.height = viewport_height - e.clientY - 10; } //check for mouse up and cancel timer. onmouseup = function(){ clearInterval(interval); } }, 100); // the above code is executed every 100 ms } });