jquery 如何在JavaScript中检查鼠标是否仍在元素上

3htmauhk  于 2023-08-04  发布在  jQuery
关注(0)|答案(3)|浏览(143)

我想写的控制台是用户保持鼠标在一个元素上超过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')) {


谢谢你的帮助

noj0wjuj

noj0wjuj1#

创建一个全局变量
第一个月
在鼠标悬停时调用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);

个字符

jchrr9hc

jchrr9hc2#

  • 编辑:我更新了我以前的答案,有了更好的解决方案。*

首先,你可能有几个元素具有相同的id,这是一件坏事,所以我改变了一个类。然后,我更新了你的代码,以简化它,并使它更符合jQuery的精神:
超文本标记语言:

<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

uplii1fm

uplii1fm3#

在所有现代浏览器上都有一个简单得多的解决方案。

var element = document.querySelector('#myElement');

if (element.matches(':hover')) {
    console.log('Mouse is over the element now.');
}

字符串

相关问题