javascript 事件--“mouseup”在mousemove后未激发

k4ymrczo  于 2022-12-17  发布在  Java
关注(0)|答案(8)|浏览(406)

我正在尝试使用Javascript拖动图像(没有库)。我能够侦听mousedownmousemove事件。由于某种原因,我无法捕获mousemove之后的mouseup事件。(如果是点击,我可以捕捉mouseup,但如果是拖动,我就不能捕捉)我已经试过在文档、窗口、和图片。下面是我的测试页面的URL:
https://dl-web.dropbox.com/get/Public/move.html?w=74a0d498
对此的任何帮助将不胜感激!

qf9go6mv

qf9go6mv1#

发现问题,如果它将是帮助任何人:
我在mousedown事件中添加了event.preventDefault();,现在收到了mouseup通知。

dl5txlt9

dl5txlt92#

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

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

u4vypkhs3#

我看到mouseup事件没有在我的目标div上触发,因为其父div开始使用拖动事件。我单击了我的目标div,这导致我的mousedownmousemove处理程序运行。我希望看到mouseup,但我没有看到。
在我的例子中,我有一个父div,它位于目标div之下,与我单击鼠标按钮的位置相同,当我松开鼠标左键时,没有在文档上冒泡mouseup事件,而是在其父div上触发了一个dragend事件。
对我来说,解决方法很简单,就是在存放目标div的父div上设置user-select: none; CSS属性,并确保在目标div上设置user-select: text。这个属性似乎禁用了父div的拖动功能,因为它已经停止使用拖动事件,所以mouseup事件现在可以正确地向上冒泡了。
我猜想发生这种情况的原因是因为浏览器开始认为鼠标移动实际上是另一个元素上的拖动事件的一部分,此时它似乎停止报告标准的鼠标事件,而切换到拖动事件。

z2acfund

z2acfund4#

我也遇到了同样的问题!添加event.preventDefault();对我很有效,但我被迫将其添加到mousedown和mousemove函数中。

cfh9epnr

cfh9epnr5#

以上两种回答都不能可靠地确保发生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在target元素上触发,则不会在html上触发,如果没有在target上触发,则会在html上触发。

0tdrvxhp

0tdrvxhp6#

对于以上两种方法:

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

在chrome87上试过了,但都没用。最后我添加了一个额外的mouseout事件侦听器,当拖出元素时它就会触发。

j0pj023g

j0pj023g7#

你想在mouseup中触发的事件,你可以在mousedown中触发,并在函数中写入event.stopPropagation()
它将停止拖动事件。

92vpleto

92vpleto8#

这对任何人都有帮助:
我建议您在添加事件mouseup时使用window而不是document

相关问题