I want to write to the console is the user is keeping the mouse over an element for more than 2 seconds, this is the code:
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);
});
}
}
the message is written to the console after 2 seconds, even if I keep the mouse on the element less than 2 seconds. I am probably missing something in here:
if ($($els[i]).is(':hover')) {
thanks for your help
Create a global variable as
var isMouseHover = false;
Call function on the mouseover call mouseover function and set
isMouseHover = true;
And call mouseout, when mouse out and set
isMouseHover = false;
Use this isMouseHover variable whenever you want.
Try this:
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>Edit : I updated my previous answer with a better solution.
First, you propably have several elements with the same id and it's a bad things, so I changed to a class. Then I updated your code to simplify it and to make it more in the spirit of 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);
});
Here is a working jsFiddle.