Javascript 如何在元素之外捕获鼠标向上事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11533098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to catch mouse-up event outside of element?
提问by ?mega
I have simple Javascript code, similar to this one:
我有简单的 Javascript 代码，类似于这个：
var mouseIsDown = false;
...
function canvasMouseDown(e) {
...
mouseIsDown = true;
}
function canvasMouseUp(e) {
mouseIsDown = false;
}
function canvasMouseMove(e) {
if (mouseIsDown) {
...
}
}
with implemention my own user interface for tranformations (translations, scalings and rotations) with canvas.
实现我自己的用户界面，用于使用画布进行转换（平移、缩放和旋转）。
Such implementation within canvasMouseMove()function check mouseIsDownvariable. All works fine if user does not release mouse button when the cursor/pointer is outside of the canvas element. If that happen, the variable mouseIsDownstays trueand is not turned off by canvasMouseUpfunction.
这种在canvasMouseMove()函数检查mouseIsDown变量中的实现。如果用户在光标/指针位于画布元素之外时不释放鼠标按钮，则一切正常。如果发生这种情况，变量会mouseIsDown保持不变true，不会被canvasMouseUp函数关闭。
What is easy fix or solution in pure JavaScript (no jQuery)for this issue?
对于此问题，纯 JavaScript （无 jQuery）有什么简单的修复或解决方案？
采纳答案by Bergi
If you want to catch the mouseupevent somewhere else in the document, you might add an event handler for this to the documentelement. Note that this won't react on mouseupevents outside the viewport, so you might want to fire also when the mouse enters the viewport again without a pressed button.
如果您想mouseup在文档中的其他地方捕获该事件，您可以为此添加一个事件处理程序到documentelement. 请注意，这不会对mouseup视口外的事件做出反应，因此您可能还想在鼠标再次进入视口而没有按下按钮时触发。
If you want to catch the mouse leaving your canvas element, it gets a bit more complicated. While IE knows a mouseleaveevent, the standard DOM has a mouseoutevent that also fires when a descendant of your element is left (although canvas usually has no child elements). Read more on that at quirksmode.org.
如果你想捕捉鼠标离开画布元素，它会变得有点复杂。虽然 IE 知道一个mouseleave事件，但标准 DOM 有一个mouseout事件，当您的元素的后代离开时也会触发该事件（尽管画布通常没有子元素）。在quirksmode.org上阅读更多相关信息。
I have created a fiddleto demonstrate the behaviour (works only with W3 DOM). You might try to change documentelementto body. In Opera, the mouseuplistener on <html>event detects mouseupevents outside the document when the "drag" began inside it - I do not know whether that is standard behaviour.
我创建了一个小提琴来演示行为（仅适用于 W3 DOM）。您可能会尝试更改documentelement为body. 在 Opera 中，当“拖动”在文档内部开始时，事件mouseup侦听器<html>会检测mouseup文档外部的事件 - 我不知道这是否是标准行为。
回答by Developia
window.addEventListener('mouseup', function(event){
// do logic here
})
It handle releasing mouse even outside of browser
它甚至可以在浏览器之外处理释放鼠标
回答by matdumsa
document.onmouseup will be thrown even outside the viewport, that's a nice-to-know you only get by binding to the document object. test here: http://jsfiddle.net/G5Xr2/
document.onmouseup 甚至会在视口之外抛出，这是一个很好的消息，您只能通过绑定到文档对象来获得。在这里测试：http: //jsfiddle.net/G5Xr2/
$(document).mouseup(function(e){
alert("UP" + e.pageX);
});
It will even receive the mouse position!
它甚至会接收鼠标位置！
回答by Waleed Khan
Add a higher-level event handler (perhaps to the body) that catches the mouseUpevent, and sets mouseIsDownto false.
添加一个更高级别的事件处理程序（可能是主体）来捕获mouseUp事件，并设置mouseIsDown为false。
Here's a demo: http://jsfiddle.net/ZFefV/
这是一个演示：http: //jsfiddle.net/ZFefV/
回答by mepler
I created a variable that stored the id string of the target element upon mousedown. On a mouseupevent, I check the string to see if it is null. If it isn't, I use the string to get the element and do whatever I want in the code block and then reset the variable to null.
我创建了一个变量来存储目标元素的 id 字符串mousedown。在mouseup事件中，我检查字符串以查看它是否为空。如果不是，我使用字符串获取元素并在代码块中执行任何我想要的操作，然后将变量重置为 null。
IN other words, steps are:
换句话说，步骤是：
1.) make a variable, set it to null. 2.) on "mousedown", save the id or class string to the variable. 3.) on "mouseup", check the variable (for safety). If it's not null. then use the string to grab the element and use it to do something. 4.) Then reset the variable to null.
1.) 创建一个变量，将其设置为 null。2.) 在“mousedown”上，将 id 或 class 字符串保存到变量中。3.) 在“mouseup”上，检查变量（为了安全）。如果它不为空。然后使用字符串抓取元素并使用它来做某事。4.) 然后将变量重置为空。
var thisTarget = null
// when I know they click in the right place, save the target.
// you may not need parent(). I was using a UI slider and needed it.
$(".section").mousedown( function(e) {
thisTarget = $(e.target.parent().attr('id');
console.log(thisTarget);
});
// anywhere on the page...
$(document).mouseup( function(e) {
// because I'll make it null after every mouseup event.
if (thisTarget !== null) {
console.log( $("#" + thisTarget) ); // returns element
// do something with it
thisTarget = null;
}
});
回答by Robin Wieruch
In JavaScript, it would be the following:
在 JavaScript 中，它将是以下内容：
myElement.addEventListener('mousedown', () => {
const handleMouseUp = (event) => {
// check whether outside the element with event.target and myElement
document.removeEventListener('mouseup', handleMouseUp);
};
document.addEventListener('mouseup', handleMouseUp);
})
