在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 之外，当用户通过 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:
- 用户在
document中触发 - 用户触发
mousemove事件.事件触发即使从document(即窗口)外部触发 - 用户触发
mouseup事件(在document之内或之外).从文档外部触发的mousemove事件不再触发
mousedown事件- 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(反之 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>
这正是谷歌地图所做的(正如我在 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我相信它实际上只有在文本节点上启动拖动操作(即 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屋！
