一旦光标离开目标元素，如何在 javascript 中跟踪鼠标移动事件？

Question

我可以使用一个简单的函数在 javascript 中获取鼠标移动事件：

myElement.onmousemove(function(event){
  // ...
});

但我认为这些事件只会在光标悬停在元素上时触发。我知道我也可以为 document 执行此操作并获取所有鼠标移动事件：

document.onmousemove(function(event){...});

但是，此事件没有属于 div 或按钮或其他任何东西的 "scope"，并且不会有相对于我正在使用的元素的偏移量。

我的解决方法是保存指向焦点 div 的变量并在获取所有运动事件时引用它，但我更愿意获取运动事件和为元素本身设置的 onmousemove 函数。有没有办法让那个元素在光标离开元素边界的情况下继续接收鼠标移动事件？

以防万一，我可以使用 jQuery，但我更喜欢本地解决方案。

Answer 1

不，当移动在附加元素之外时，不可能获得 mousemove 事件。正如您所说的那样，您可以跟踪文档上的移动。将其与 mouseenter and mouseleave 事件一起使用时，您可以 set/unset 一个变量来指示元素上是否正在发生移动。

例如

var myElement = document.getElementById("special");
var isOverMyElement = false;
document.addEventListener('mousemove', function(e){
    if (isOverMyElement){
        console.log("mouse is within myelement at details", e);
    }
})
myElement.addEventListener('mousenter', function(e){
    isOverMyElement = true;
})
myElement.addEventListener('mousenter', function(e){
    isOverMyElement = false;
})

如果您的目标是较旧的浏览器，请使用 jQuery，因为它会在浏览器上标准化 mouseenter/leave。如果您的目标是现代浏览器，则不需要 jQuery

一旦光标离开目标元素，如何在 javascript 中跟踪鼠标移动事件？

How can I track mouse move events in javascript once the cursor is off of the target element?

html

javascript

motionevent