Quiero escribir en la consola si el usuario mantiene el mouse sobre un elemento durante más de 2 segundos, este es el código:
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); }); } }el mensaje se escribe en la consola después de 2 segundos, incluso si mantengo el mouse sobre el elemento menos de 2 segundos. Probablemente me estoy perdiendo algo aquí:
if ($($els[i]).is(':hover')) {Gracias por tu ayuda
Crear una variable global como
var isMouseHover = false;
Llamar a la función en el mouseover llamar a la función mouseover y establecer
isMouseHover = true;
Y llame a mouseout , cuando el mouse salga y se establezca
isMouseHover = false;
Use esta variable isMouseHover cuando lo desee.
Prueba esto:
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>Editar: actualicé mi respuesta anterior con una mejor solución.
Primero, probablemente tenga varios elementos con la misma identificación y es algo malo, así que cambié a una clase. Luego actualicé su código para simplificarlo y hacerlo más acorde con el espíritu de 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); });Aquí hay un jsFiddle que funciona.