拖动期间释放鼠标时忽略 JavaScript mouseUp 事件

Question

我有一个<div>在我的脚本中创建并附加到另一个 <div> 的元素。我有:

 coverElm.onmousedown = mouseDownEventHandeler;
 document.onmouseup = mouseUpEventHandeler;
 document.onmousemove = mouseMoveEventHandeler;

我已经定义了函数并且工作得很好，并且用 bool 值 mouseDown 来跟踪鼠标是否按下。 .

问题 - 当按下并释放鼠标时 document.onmouseup从未被处理过。我认为这是因为它拖累了 <div> 中的任何内容。女巫只是几句话的文字。我也有这个问题，没有文字。

所以我正在寻找一种方法来防止这种奇怪的拖动行为，或者 onmousedrag 的方法查看鼠标是否被按下 - 不使用鼠标向上和鼠标向下方法

这是我的功能:

function mouseUpEventHandeler(e) {
        mouseDown = false;
}
function mouseDownEventHandeler(e) {
        mouseDown = true;
}
function mouseMoveEventHandeler(e) {
        if (mouseDown) {
               coverElm.innerHTML ="<p>Mouse down and dragging</p>";
        }
}

Answer 1

90% 的情况下，这是因为拖动的元素位于具有 mouseup 事件监听器的元素前面，因此下面的父元素永远不会获取该事件。

通常，可以使用 addEventListener(而不是事件的内联形式)来解决此问题。解决此问题的另一种方法是在释放鼠标时为拖动的元素提供一个 eventListener。此外，您还可以在元素开始拖动时将 div 放置在所有其他元素的前面(通过 zIndex 属性)。

编辑:我编写了一些概念验证代码: http://jsfiddle.net/2BkEM/5/