在拖动过程中释放鼠标时忽略 JavaScript mouseUp 事件

JavaScript mouseUp event ignored when mouse is released during drag

本文关键字：JavaScript mouseUp 事件 拖动 过程中 释放 鼠标      更新时间：2023-09-26

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

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

我已经定义了函数并且工作得很好，并跟踪鼠标是否按下并带有布尔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>";
        }
}

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

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

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

$j(divID).bind('dragstart', function (event) { event.preventDefault() });

谢谢大家

相关文章：