js拖拽遇到的问题，待解决

以下拖拽代码，遇到一个问题，点击拖拽狗狗后，鼠标松开，继续移动鼠标，狗狗仍是被拖拽状态，得再次点击鼠标，释放拖拽事件。
我百思不得其解，猜测是不是document.onmouseup没有准确的检测鼠标的释放，诶，不知道

window.onload = function() {
    drag();
}

function drag() {
    var oDog = document.getElementById("dog");
    oDog.onmousedown = fnDown;
}

function fnDown(event) {
    event = EventUtil.getEvent();
    var oDog = document.getElementById('dog'),
        disX = event.clientX - oDog.offsetLeft,
        disY = event.clientY - oDog.offsetTop;

    document.onmousemove = function(event) {
        if (oDog.onmousedown) {
            fnMove(event, disX, disY);
        }
    }
    document.onmouseleave = document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
    }
    document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}


function fnMove(e, posX, posY) {
    var oDog = document.getElementById('dog'),
        l = e.clientX - posX,
        t = e.clientY - posY,
        winW = document.getElementById("backhome").offsetWidth,
        winH = document.getElementById("backhome").offsetHeight,
        maxW = winW - oDog.offsetWidth,
        maxH = winH - oDog.offsetHeight;
    if (l < 0) {
        l = 0;
    } else if (l > maxW) {
        l = maxW;
    }
    if (t < 0) {
        t = 0;
    } else if (t > maxH) {
        t = maxH;
    }
    oDog.style.left = l + 'px';
    oDog.style.top = t + 'px';

}