如何捕捉元素外的鼠标上移事件

How to catch mouse-up event outside of element?

本文关键字：事件 鼠标 何捕捉 元素      更新时间：2023-11-11

我有简单的Javascript代码，类似于以下代码：

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

通过使用canvas实现我自己的转换（翻译、缩放和旋转）用户界面。

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

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

如果您想在文档中的其他地方捕获mouseup事件，可以在documentelement中添加一个事件处理程序。请注意，这不会对视口外的mouseup事件做出反应，因此，当鼠标再次进入视口而不按下按钮时，您可能也需要激发。

如果你想抓住离开画布元素的鼠标，它会变得有点复杂。虽然IE知道mouseleave事件，但标准DOM有一个mouseout事件，该事件也会在元素的后代留下时触发（尽管画布通常没有子元素）。更多信息请访问quicksmode.org。

我创建了一个fiddle来演示该行为（仅适用于W3DOM）。您可以尝试将documentelement更改为body。在Opera中，<html>事件上的mouseup侦听器在文档内部开始"拖动"时检测到文档外部的mouseup事件——我不知道这是否是标准行为。

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

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

document.onmouseup即使在视口之外也会被抛出，很高兴知道您只能通过绑定到文档对象来获得。在此处测试：http://jsfiddle.net/G5Xr2/

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

它甚至会接收鼠标的位置！

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

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

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

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

换句话说，步骤是：

1.）生成一个变量，将其设置为null。2.）在"mousedown"上，将id或类字符串保存到变量中。3.）在"mouseup"上，检查变量（为了安全起见）。如果它不是null。然后使用字符串获取元素并使用它执行某些操作。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;
    }
});
相关文章：