Question

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

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

实现我自己的用户界面，用于使用画布进行转换（翻译，缩放和旋转）。

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

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

Answer 1

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

如果你想抓住鼠标离开你的画布元素，它会变得有点复杂。虽然IE知道mouseleave事件，但标准DOM有一个mouseout事件，当你的元素的后代被留下时它也会被触发（尽管画布通常没有子元素）。请在quirksmode.org了解详情。

我创建了a fiddle来演示行为（仅适用于W3 DOM）。您可以尝试将documentelement更改为body。在Opera中，mouseup事件上的<html>侦听器在文档内部发生“拖动”时会检测到mouseup个事件 - 我不知道这是否属于标准行为。

Answer 2

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

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

它甚至会收到鼠标位置！

Answer 3

添加捕捉mouseUp事件的更高级别的事件处理程序（可能是正文），并将mouseIsDown设置为false。

以下是演示：http://jsfiddle.net/ZFefV/

Answer 4

window.addEventListener('mouseup', function(event){
// do logic here
})

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

Answer 5

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

换句话说，步骤是：

1。）创建一个变量，将其设置为null。 2.）on＆＃34; mousedown＆＃34 ;,将id或类字符串保存到变量中。 3.）on＆＃34; mouseup＆＃34;，检查变量（为安全起见）。如果它不是空的。然后使用该字符串来抓取元素并使用它来做某事。 4.）然后将变量重置为null。

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;
    }
});

Answer 6

在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);
})

如何捕捉元素之外的鼠标事件？

6 个答案: