在IE中响应浏览器窗口之外的onmousemove事件 [英] Responding to the onmousemove event outside of the browser window in IE
问题描述
在Internet Explorer 7中， body onmousemove 或 document.onmousemove 事件似乎只在鼠标位于浏览器窗口内时触发，而不是在外部时触发。然而在Firefox中，当我移出浏览器窗口时，onmousemove事件被正确调用。
In Internet Explorer 7 body onmousemove or document.onmousemove events only seem to fire while the mouse is inside the browser window, not when it's outside. Yet in Firefox the onmousemove event is called correctly when I move outside of the browser window.
如何在IE浏览器窗口之外设置要调用的事件？
How can I setup an event to be called outside of the browser window in IE?
Google地图在IE中执行此操作。如果按住鼠标按钮并将鼠标移到浏览器窗口之外，则可以看到地图仍在移动。
Google Maps does this in IE. If you hold the mouse button down and move the mouse outside of the browser window you can see that the map still moves.
推荐答案
（注意：这个答案完全是指 mousedown - > mousemove - > mouseup 的标准拖动实现。它不适用于 HTML5拖动规范）。
(Note: this answer refers exclusively to the "standard" drag implementation of mousedown -> mousemove -> mouseup. It is not applicable to the HTML5 drag specification).
允许在浏览器窗口外拖动是一个老问题，不同的浏览器有两种解决方法。
Allowing dragging outside the browser window is an old problem that different browsers have solved in two ways.
除IE外，当用户通过<启动拖动操作时code> mousedown 浏览器做得很好（这只是观察）：一种状态机开始处理窗外鼠标移动的特殊情况：
With the exception of IE, when a user initiates a drag operation via mousedown browsers have done something neat (and this is all just from observation): a kind of statemachine kicks in to handle the special case of mouse movements outside the window:
- 用户触发器
mousedown文件中的事件 - 用户三ggers
mousemove事件。即使从文档（即窗口）外部触发，事件也会触发 - 用户触发器
mouseup事件（在文档内部或外部）。mousemove从文档外部触发的事件不再触发
- User triggers
mousedownevent inside thedocument - User triggers
mousemoveevent. Event fires even when triggered from outside thedocument(i.e. the window) - User triggers
mouseupevent (inside or outside thedocument).mousemoveevents triggered from outside the document no longer fire
IE和旧版本的Firefox [最晚为2.0.20]不会出现此行为。在窗口外拖动只是不起作用 1 。
IE and older versions of Firefox [as late as 2.0.20] don't exhibit this behavior. Dragging outside the window just doesn't work1.
IE和FF2的问题实际上在于元素是可选还是不（请参阅此处和这里）。如果拖动实现什么都不做（从而允许鼠标选择），那么所述实现不必考虑窗口外的移动;浏览器将继续并正确触发 mousemove ，并允许用户在窗口外自由拖动。很好。
The problem for IE and FF2 actually lies in whether an element is "selectable" or not (See here and here). If a dragging implementation does nothing (thereby allowing selection by the mouse), then said implementation does not have to account for movements outside the window; the browser will go ahead and fire mousemove properly and the user is allowed to drag freely outside the window. Nice.
然而，让浏览器决定在mousemove上做什么，你会得到这种效果，浏览器认为用户试图选择某些东西（例如元素） ，而不是移动它，并继续疯狂地尝试突出其中的元素或文本，因为鼠标在拖动过程中穿过或跳出元素。
However by letting the browser decide what to do on mousemove you get this effect where the browser thinks the user is trying to "select" something (eg the element), as opposed to moving it, and proceeds to frantically try to highlight the element or text therein as the mouse crosses in or out of the element during the drag.
大多数拖动我看到的实现做了一个小技巧，使元素被拖动无法选择，从而完全控制 mousemove 来模拟拖动：
Most drag implementations I've seen do a little trick to make the element being dragged "unselectable", thereby taking full control of mousemove to simulate dragging:
elementToDrag.unselectable = "on";
elementToDrag.onselectstart = function(){return false};
elementToDrag.style.userSelect = "none"; // w3c standard
elementToDrag.style.MozUserSelect = "none"; // Firefox
这很好用，但是在窗外拖出。 2
无论如何，回答你的问题，让IE（所有版本）允许在窗外拖动，使用 setCapture （反向 <释放鼠标时code> releaseCapture 。
Anyway, to answer your question, to get IE (all versions) to allow dragging outside the window, use setCapture (and inversely releaseCapture when the mouse is released).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple drag demo</title>
<style>
#dragme {
position:absolute;
cursor:move;
background:#eee;
border:1px solid #333;
padding:10px;
}
</style>
<script>
function makeDraggable(element) {
/* Simple drag implementation */
element.onmousedown = function(event) {
document.onmousemove = function(event) {
event = event || window.event;
element.style.left = event.clientX + 'px';
element.style.top = event.clientY + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
if(element.releaseCapture) { element.releaseCapture(); }
};
if(element.setCapture) { element.setCapture(); }
};
/* These 3 lines are helpful for the browser to not accidentally
* think the user is trying to "text select" the draggable object
* when drag initiation happens on text nodes.
* Unfortunately they also break draggability outside the window.
*/
element.unselectable = "on";
element.onselectstart = function(){return false};
element.style.userSelect = element.style.MozUserSelect = "none";
}
</script>
</head>
<body onload="makeDraggable(document.getElementById('dragme'))">
<div id="dragme">Drag me (outside window)</div>
</body>
</html>
这正是Google地图所做的事情（正如我自2004年首次发现逆向工程谷歌地图时所发现的那样）已发布）。
This is exactly what Google maps does (as I discovered since reverse engineering google maps back in 2004 when it was first released).
1 我相信它实际上只会在启动拖动时中断textnode上的操作（即 mousedown ）。元素/容器节点不会表现出相同的行为，并且可以在文档内部或外部拖动，前提是用户在元素的空部分进行了鼠标
1I believe it actually only breaks when initiating a drag operation (i.e. mousedown) on a textnode. Element/container nodes do not exhibit the same behavior and can be dragged around inside or outside the document, provided the user moused down on an "empty " portion of the element
2 同样，对于文本节点的拖动启动。
这篇关于在IE中响应浏览器窗口之外的onmousemove事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
