Trigger-Code nach dem Stoppen der Maus

Question

Ich habe einen Code-Block, der bei Eingabe der Maus ausgelöst wird. Ich habe auch einen Code-Block, der erkennt, wenn sich die Maus nicht mehr bewegt.

Ich möchte, dass der Mouseenter-Code nur ausgeführt wird, wenn die Maus innerhalb des eingegebenen Objekts nicht mehr bewegt wird.

// Add events to each dot 
for (var i = 0; i < dots.length; i++) { 
    dots[i].addEventListener('mouseenter', function (event) { 
    var target = event.target; 

    // Add a class called moving when follow dot is in a transition 
    followDot.classList.add('moving'); 

    targetsPosition[0] = target.style.left; 
    targetsPosition[1] = target.style.top; 

    // Detect if the dot is moving left or right 
    if (followDot.style.left < targetsPosition[0]) { 
     removeMovingClasses(); 
     followDot.classList.add('moving-right'); 
    } else if (followDot.style.left > targetsPosition[0]) { 
     removeMovingClasses(); 
     followDot.classList.add('moving-left'); 
    } 

    // 
    followDot.style.left = targetsPosition[0]; 
    }); 
} 

Der Timeout-Code:

// Detect when the mouse has stopped 
document.onmousemove = function(){ 
    clearTimeout(timeout); 

    timeout = setTimeout(function() { 
    // console.log('mouse stopped'); 
    }, 300); 
} 

Answer 1

diese Lösung Versuchen Sie Ereignis auslösen können, wenn die Maus auf div for example für bestimmte Zeit im Leerlauf ist.

HTML:

<h2>fire event when mouse is idle</h2> 
<div id="sample"> 
</div> 

CSS:

#sample { 
    width:200px; 
    height:200px; 
    background: #aaa; 
} 

JavaScript:

idleTimer = null; 
idleState = false; 
idleWait = 2000; 

(function ($) { 

$(document).ready(function() { 
var $sample = $("#sample"); 
    $('*').bind('mousemove keydown scroll', function() { 

     clearTimeout(idleTimer); 

     if (idleState == true) { 

      // Reactivated event 
      if($sample.is(":hover")) { 
          alert('mouse has moved again'); 
         } 

     } 

     idleState = false; 

     idleTimer = setTimeout(function() { 

      // Idle Event 
      if($sample.is(":hover")) { 
          alert('mouse has stopped for two seconds'); 
         } 

      idleState = true; }, idleWait); 
    }); 

    $("body").trigger("mousemove"); 

}); 
}) (jQuery) 

Sie idleWait Variable auf die Zeit ändern können, die Sie wollen, (2 s in diesem Beispiel)

jsfiddle Example

ich hoffe, dass es für Sie arbeitet :)

Answer 2

Alles in Ordnung Looks, die Sie nur eine kleine Änderung vornehmen müssen. Versuchen Sie, das mouse-move-Ereignis zu dem Bereich hinzuzufügen, auf den Sie ausgerichtet sind, anstatt das Dokument (es sei denn, es handelt sich um das gesamte Dokument). Außerdem sollten Sie Ihren ersten Block in eine Funktion einfügen, die nach dem Stoppen der Maus aufgerufen wird.

Beispiel

function mouseHasStopped(){ 
//code in first block... 
} 

//adding an event listener to whatever element is entered . in this example i'm using "element" as our entered object ... 

element.addEventListener("mousemove",function(){ 

    clearTimeout(timeout); 
    timeout=setTimeout(mouseHasStopped,300); 
}); 

hoffe, das hilft