我不能将元素拖到文档窗口之外，但不能拖到简单的 div 之外。为什么？

Question

我试图通过捕获鼠标坐标并相应地移动内容来将内容从文档中拖出。目前我使用 document.addEventListener ，即使我将东西拖到窗口外也能很好地工作。功能正在增加，为了跟上复杂性，我宁愿使用 div 和 div1.addEventListener。

但是这个改变并不能让我把东西拖到我的 div 之外，更不用说我的窗口之外了。我说的是仅拖动（鼠标在 div 内向下，然后将鼠标拖出）。我一离开 div，它就会停下来。

我不明白发生了什么，我很久以前就尝试过它，我记得这是工作代码。

fiddle here

window.onload = function()
{
    div1 = document.getElementById("div1");

    document.addEventListener('mousedown', function(evt){mouseDown(evt, this)}, false);
    document.addEventListener('mousemove', function(evt){mouseMove(evt, this)}, false);
    document.addEventListener('mouseup', function(evt){mouseUp(evt, this)}, false);

    // div1.addEventListener('mousedown', function(evt){mouseDown(evt, this)}, false);
    // div1.addEventListener('mousemove', function(evt){mouseMove(evt, this)}, false);
    // div1.addEventListener('mouseup', function(evt){mouseUp(evt, this)}, false);
}

function mouseMove(evt, caller)
{
}

function mouseDown(evt, caller)
{
}

function mouseUp(evt, caller)
{
}

Answer 1

由于 div 的坐标没有改变，当拖动超出其边界时，它会停止获取 mouseMove 事件。