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变量。

Answer 2

编辑：我使用更好的解决方案更新了我以前的答案。

首先，你可能有几个具有相同id的元素，这是一件坏事，所以我改成了一个类。然后我更新了你的代码以简化它并使其更符合jQuery的精神：

HTML：

<div class="myDiv" data-track='hover'>
test
</div>
<div class="myDiv" data-track='hover'>
test2
</div>

JavaScript：

$('.myDiv[data-track=hover]').on("mouseenter",function(){
    var $elem = $(this);
  $elem.attr("data-hover",true);
  window.setTimeout(function() {
    if ($elem.attr("data-hover")) {
        console.log('mouse is still over this element');
        console.log($elem);
    }
  }, 2000);
})

$('.myDiv[data-track=hover]').on("mouseenter",function(){
  $(this).attr("data-hover",false);
});

这是一个有效的jsFiddle。

如何在Javascript中检查鼠标是否仍然在元素上

2 个答案: