时间戳

首页 > 解决方案 > 一旦光标离开目标元素，如何在javascript中跟踪鼠标移动事件？

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

问题描述

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

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

但我认为这些事件仅在光标悬停在元素上时才会触发。我知道我也可以这样做document并获取所有鼠标运动事件：

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

但是，此事件不具有属于 div 或按钮或其他任何内容的“范围”，并且相对于我正在使用的元素不会有偏移量。

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

万一这很重要，我可以使用 jQuery，但我更喜欢本机解决方案。

标签： javascripthtmlmotionevent

解决方案

mousemove不，当移动在附加元素之外时，不可能得到事件。正如您所说的正确，您可以跟踪文档上的移动。当将它与mouseenter 和 mouseleave事件一起使用时，您可以设置/取消设置一个变量来指示元素是否正在发生移动。

例如

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，因为它可以规范鼠标进入/离开浏览器。如果您的目标是现代浏览器，则不需要 jQuery

推荐阅读