Question

我正在开发一个网络应用程序，我支持拖动页面，只需观察mousedown / mousemove / mouseup事件。那部分效果很好。

问题在于我只是在设计中处理一个特定元素内部的拖动，如果用户（意外或非意外）拖到外面，它会在拖动模式下“卡住”。也就是说，鼠标按下，然后鼠标离开窗口，然后鼠标向上，然后鼠标返回到窗口，看起来仍在拖动，到我的应用程序。

我还没有找到解决这个问题的方法 - 即使是“当鼠标重新进入窗口时，鼠标按钮是否向下滑动？”会工作的。

这样的功能是否存在，我只是错过了它？或者我可以在这里使用一些聪明的解决方法吗？

传统支持对我来说并不重要 - 如果它是一个仅适用于FF3.5 / Chr4 / Sf4的HTML5解决方案，我很满意。

Answer 1

在IE7 / IE8中，您可以使用以下代码检测鼠标是否已在窗口外释放：

document.onmousemove = function(event) {
    event = event || window.event;
    if (document.all && event.button != 1) {
        canceldragging();
    }
}

在Firefox和Webkit中，即使鼠标指针位于浏览器窗口之外，鼠标释放时也会在文档上触发mouseup事件。您可以使用http://www.quirksmode.org/dom/events/tests/click.html

查看此信息

对于IE8，当鼠标按钮仅在浏览器窗口外被释放时触发文件onmouseup事件如果允许文档选择（如上面的链接那样）。也就是说，在IE8中，如果使用document.onselectstart并取消选择，或者如果在起始元素上使用unselectable =“on”，或者如果调用document.selection.clear（），则不会获得mouseup事件鼠标停止时使用document.selection.empty（）。

Answer 2

如果你有元素的onmouseout事件触发mouseup事件怎么办？

如果你只是使用内联处理程序，那就是：

<div id='dragElement' onmouseup='alert("stop dragging!")' onblur='this.onmouseup();'></div>

添加到您已使用的任何事件处理代码中。只要元素失去焦点，这就会“释放”拖动。不是最干净的代码，但你明白了。

HTML DOM拖放：当鼠标离开窗口时怎么办？

2 个答案: