如何檢查鼠標是否仍在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;

鼠標懸停調用函數調用鼠標懸停函數並設置

isMouseHover = true;

並調用mouseout ，當鼠標移出並設置

isMouseHover = false;

isMouseHover使用此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>

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 。