Question

我试图用javascript（没有库）拖动图像。我能听到“mousedown”和“mousemove”事件。出于某种原因，我无法在mousemove之后捕获“mouseup”事件。（如果是点击，我可以捕获mouseup，但如果是拖动则不能捕获）。我试图在文档，窗口和图像上收听事件。这是我的测试页面的网址：

https://dl-web.dropbox.com/get/Public/move.html?w=74a0d498

对此的任何帮助将不胜感激！谢谢！

Answer 1

发现问题，如果它对任何人都有帮助：

我在event.preventDefault();事件中添加了mousedown，现在我收到了mouseup次通知。

Answer 2

奇怪的是，我发现当我使用下面的CSS将我的文本设置为不可选时，这也会禁止mouseup事件被触发 - 也许这会帮助其他人。

-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

Answer 3

我遇到了同样的问题！添加event.preventDefault();对我有用，但我被迫将其添加到mousedown和mousemove函数中。

Answer 4

我已经看到mouseup事件没有在目标div上触发，因为其父级div开始消耗拖动事件。我单击了目标div，这导致我的mousedown和mousemove处理程序运行。我原本希望看到mouseup，但没有看到。

在我的情况下，我有一个父母div生活在目标div下方，并且位于启动鼠标按钮单击的位置，而不是冒充mouseup事件放开鼠标左键后，我的文档在其父dragend上触发了div事件触发。

对我来说，解决方案只是在包含目标user-select: none;的父div上设置div CSS属性，并确保在目标{ {1}}。此属性似乎禁用了对我的父user-select: text的拖动，并且由于它已经停止消耗拖动事件，所以我的div事件现在可以正常冒泡了。

我认为可能发生这种情况的原因是，浏览器开始认为您的鼠标移动实际上是另一个元素上拖动事件的一部分，这时似乎停止报告标准鼠标事件，而是切换到拖动事件。

Answer 5

上述任何一个答案都无法可靠地确保发生mouseup事件。

这是我发现的一贯工作原理：

document.querySelector('html').addEventListener('mouseup', function (e) {
    console.log("html mouseup");
    var evt = document.createEvent("MouseEvents");
    evt.initEvent("mouseup", true, true);
    document.getElementById('drag-me').dispatchEvent(evt);
});

如果mouseup在目标元素上触发，则不会在html上触发，并且如果未在目标元素上触发，则将在html上触发。

Answer 6

对于以上两种方法：

在e.preventDefault()事件中添加mouseup
添加user-select: none CSS规则

在Chrome 87上尝试过，但两者都没有用。最后，我添加了一个额外的mouseout事件监听器，并将其从元素中拖出时会触发。

javascript-events--'mouseup'在mousemove之后没有触发

6 个答案: