如果在触发onmousedown
的元素之外释放鼠标按钮,则不会触发Javascript onmouseup
event。
这会导致JQuery UI中的拖放错误:当鼠标按钮在JQuery draggable元素的容器外释放时,该元素不会停止拖动(因为该元素在到达其父边界时会停止移动)。重现步骤:
- 转到http://jqueryui.com/draggable/。
- 向下拖动可拖动对象,直到鼠标离开周围的容器
- 释放鼠标按钮(此时不按鼠标按钮)
- 将鼠标移回容器
- 而可拖动对象仍在被拖动。我希望在我释放鼠标键时拖动就会停止-- * 不管 * 它在哪里释放。
我在最新的Chrome和IE中看到了这种行为。
是否有任何变通办法?
我知道我们可以停止在mouseout
或mouseleave
上拖动容器,但我想继续拖动,即使我在父容器之外,就像在google maps中一样(无论在哪里释放鼠标,它总是停止拖动Map)。
4条答案
按热度按时间m4pnthwp1#
你可以让你的mousedown元素“捕获”指针。然后它总是会接收mouseup事件。在React中,这可能看起来像这样:
个字符
下面是一个使用“普通”html + JavaScript的实现:
型
55ooxyrt2#
我发现这是最好的解决方案:将
mouseup
事件处理程序附加到document
。然后它将总是取消,即使您在浏览器外释放鼠标按钮。当然,这不是一个漂亮的解决方案,但显然,这是使拖动正确工作的唯一方法。尝试以下解决方案:
unselectable
class。更新
现在,the
setPointerCapture
API提供了一个更干净的解决方案,如this answer中所解释的。deyfvvtc3#
最好的处理方法是在mousemove事件处理程序中检查当前按钮状态。如果按钮不再按下,则停止拖动。
如果你把mouseup事件放在文档上,那么你只是把问题向上移动,如果你在文档外(甚至在浏览器窗口外)释放按钮,原来的问题仍然会显示出来。
例如jQuery
字符串
你可以跳过mouseup事件处理程序,因为它会被mousemove捕获,但我认为它仍然存在,可读性更强。
cidc1ykv4#
如果你创建了一个“index.html”文件,里面有下面的代码(你可以完全复制粘贴),它将显示使用普通html + JavaScript的工作解决方案。
字符串