jQuery 手动调整大小的 DIV

我正在尝试创建一个可调整大小的 div，而不使用 jQuery 的界面库。

var myY = 0;
var mouseDown = false;
var originalHeight = 0; 

function resize(e){
    if(mouseDown == true){
        $("#cooldiv").height(originalHeight+e.pageY-myY);
    }
} 

$(document).ready(function(){
    $().mouseup(function(e){
        myY = 0;
        mouseDown = false;
        originalHeight = 0;
        $().unbind("mousemove", resize);
    });

    $("#resizeBar").mousedown(function(e){
        myY = e.pageY;
        originalHeight = $("#cooldiv").height();
        mouseDown = true;
        $().bind("mousemove", resize);
    });
});

...

<div id="cooldiv" style="width: 500px; height: 300px; background-color: #cccccc; position: relative;">
<div id="resizeBar" style="height: 10px; width: 500px; background-color: #aaaaaa; position: absolute; bottom: 0;"></div>
</div>  

第一次调整大小工作正常（即 mousedown、mousemove 然后 mouseup），但在后续（mousedown+mousemove）中，浏览器尝试拖动整个 resizeBar div，而不是正确调整其父容器的大小。在 mouseup 上，div 然后开始在 mousemove 上调整“cooldiv”的大小，而不需要任何 mousedown，直到进一步单击鼠标。

这些问题不会出现在 Internet Explorer 中。

尝试添加

$("#cooldiv").focus();

到 mouseup 函数的末尾。