49

我有简单的 Javascript 代码，类似于这个：

var mouseIsDown = false;
...
function canvasMouseDown(e) {
  ...
  mouseIsDown = true;
}
function canvasMouseUp(e) {
  mouseIsDown = false;
}
function canvasMouseMove(e) {
  if (mouseIsDown) {
    ...
  }
}

通过实现我自己的用户界面，用于使用画布进行转换（平移、缩放和旋转）。

canvasMouseMove()函数检查mouseIsDown变量中的这种实现。如果用户在光标/指针位于画布元素之外时不释放鼠标按钮，则一切正常。如果发生这种情况，变量将mouseIsDown保留并且不会被函数true关闭。canvasMouseUp

对于这个问题，纯 JavaScript （无 jQuery）有什么简单的修复或解决方案？

4

6 回答 6

28

如果您想mouseup在文档中的其他位置捕获该事件，您可以为此添加一个事件处理程序到documentelement. 请注意，这不会对mouseup视口外的事件做出反应，因此您可能还想在鼠标再次进入视口而没有按下按钮时触发。

如果你想捕捉鼠标离开你的画布元素，它会变得有点复杂。虽然 IE 知道一个mouseleave事件，但标准 DOM 有一个mouseout事件，当您的元素的后代离开时也会触发（尽管画布通常没有子元素）。在quirksmode.org上阅读更多内容。

我创建了一个小提琴来演示该行为（仅适用于 W3 DOM）。您可以尝试更改documentelement为body. 在 Opera 中，事件mouseup监听器会在文档内部开始“拖动”时<html>检测到mouseup文档外部的事件 - 我不知道这是否是标准行为。

于 2012-07-18T01:46:53.093 回答
20 
window.addEventListener('mouseup', function(event){
// do logic here
})

它甚至可以在浏览器之外处理释放鼠标

于 2015-11-05T11:55:37.613 回答
9

document.onmouseup 甚至会在视口之外被抛出，这是一个很高兴知道您只能通过绑定到文档对象来获得的信息。在这里测试：http: //jsfiddle.net/G5Xr2/

$(document).mouseup(function(e){
  alert("UP" + e.pageX);
});

它甚至会接收鼠标位置！

于 2013-01-09T07:22:34.427 回答
7

添加一个捕获事件的更高级别的事件处理程序（可能是主体）mouseUp，并设置mouseIsDown为false.

这是一个演示：http: //jsfiddle.net/ZFefV/

于 2012-07-18T01:33:53.060 回答
3

在 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);
})
于 2019-07-17T07:42:47.957 回答
2

我创建了一个变量，将目标元素的 id 字符串存储在mousedown. 在一个mouseup事件中，我检查字符串以查看它是否为空。如果不是，我使用字符串来获取元素并在代码块中执行我想要的任何操作，然后将变量重置为 null。

换句话说，步骤是：

1.）创建一个变量，将其设置为null。2.) 在“mousedown”上，将 id 或类字符串保存到变量中。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;
    }
});
于 2016-01-16T16:20:03.010 回答