我正在尝试使用Javascript拖动图像(没有库)。我能够侦听mousedown
和mousemove
事件。由于某种原因,我无法捕获mousemove
之后的mouseup
事件。(如果是点击,我可以捕捉mouseup
,但如果是拖动,我就不能捕捉)我已经试过在文档、窗口、和图片。下面是我的测试页面的URL:
https://dl-web.dropbox.com/get/Public/move.html?w=74a0d498
对此的任何帮助将不胜感激!
我正在尝试使用Javascript拖动图像(没有库)。我能够侦听mousedown
和mousemove
事件。由于某种原因,我无法捕获mousemove
之后的mouseup
事件。(如果是点击,我可以捕捉mouseup
,但如果是拖动,我就不能捕捉)我已经试过在文档、窗口、和图片。下面是我的测试页面的URL:
https://dl-web.dropbox.com/get/Public/move.html?w=74a0d498
对此的任何帮助将不胜感激!
8条答案
按热度按时间qf9go6mv1#
发现问题,如果它将是帮助任何人:
我在
mousedown
事件中添加了event.preventDefault();
,现在收到了mouseup
通知。dl5txlt92#
奇怪的是,我发现当我使用下面的CSS将文本设置为不可选择时,也会抑制
mouseup
事件的触发--也许这会帮助其他人。u4vypkhs3#
我看到
mouseup
事件没有在我的目标div
上触发,因为其父div
开始使用拖动事件。我单击了我的目标div
,这导致我的mousedown
和mousemove
处理程序运行。我希望看到mouseup
,但我没有看到。在我的例子中,我有一个父
div
,它位于目标div
之下,与我单击鼠标按钮的位置相同,当我松开鼠标左键时,没有在文档上冒泡mouseup
事件,而是在其父div
上触发了一个dragend
事件。对我来说,解决方法很简单,就是在存放目标
div
的父div
上设置user-select: none;
CSS属性,并确保在目标div
上设置user-select: text
。这个属性似乎禁用了父div
的拖动功能,因为它已经停止使用拖动事件,所以mouseup
事件现在可以正确地向上冒泡了。我猜想发生这种情况的原因是因为浏览器开始认为鼠标移动实际上是另一个元素上的拖动事件的一部分,此时它似乎停止报告标准的鼠标事件,而切换到拖动事件。
z2acfund4#
我也遇到了同样的问题!添加
event.preventDefault();
对我很有效,但我被迫将其添加到mousedown和mousemove函数中。cfh9epnr5#
以上两种回答都不能可靠地确保发生mouseup事件。
以下是我发现的一贯有效的方法:
如果mouseup在target元素上触发,则不会在html上触发,如果没有在target上触发,则会在html上触发。
0tdrvxhp6#
对于以上两种方法:
mouseup
事件中添加e.preventDefault()
user-select: none
CSS规则在chrome87上试过了,但都没用。最后我添加了一个额外的
mouseout
事件侦听器,当拖出元素时它就会触发。j0pj023g7#
你想在mouseup中触发的事件,你可以在mousedown中触发,并在函数中写入
event.stopPropagation()
。它将停止拖动事件。
92vpleto8#
这对任何人都有帮助:
我建议您在添加事件
mouseup
时使用window
而不是document