[英]How to check if mouse is still over element in Javascript
我想写入控制台是用户将鼠标悬停在元素上超过 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')) {
感谢您的帮助
创建一个全局变量作为
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>
编辑:我用更好的解决方案更新了我以前的答案。
首先,你可能有几个具有相同 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 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.