javascript - 如何检查鼠标是否仍在 Javascript 中的元素上

Question

我想写入控制台的是用户将鼠标悬停在某个元素上超过 2 秒，这是代码:

var $els = document.querySelectorAll('#myDiv');
    for(i = 0; i < $els.length; i++) {
        if ($($els[i]).data('track') == 'hover') {
            $els[i].addEventListener('mouseover', function (e) {
                setTimeout(function() {
                    if ($($els[i]).is(':hover')) {
                        console.log('mouse is still over this element');
                    }
                }, 2000);
            });
        }
    }

即使我将鼠标放在元素上的时间少于 2 秒，消息也会在 2 秒后写入控制台。我可能在这里遗漏了一些东西:

if ($($els[i]).is(':hover')) {

感谢您的帮助

Answer 1

创建一个全局变量

var isMouseHover = false;

鼠标悬停时调用函数mouseover功能及设置

isMouseHover = true;

并调用mouseout ，当鼠标移出并设置

isMouseHover = false;

您可以随时使用这个 isMouseHover 变量。

试试这个:

let isMouseHover = false
let test = document.getElementById("test");
test.addEventListener("mouseleave", function (event) {
  isMouseHover = false
  event.target.textContent = "mouse out"
  console.log(isMouseHover)
}, false);
test.addEventListener("mouseover", function (event) {
  isMouseHover = true
  event.target.textContent = "mouse in"
  console.log(isMouseHover)
}, false);

  <div id="test">hover me</div>