Kann ein Ereignis ausgelöst werden, wenn die Maus nicht mehr bewegt wird?

Question

Ich habe ein Ereignis, das ausgelöst wird, wenn ein Benutzer ihre Maus über ein div-Element hat und während sie die Maus über das Element bewegen. Ich kann jedoch keine Möglichkeit finden, ein Ereignis auszulösen, wenn die Maus nicht mehr bewegt wird. Zum Beispiel überprüft das Ereignis, an dem ich gerade arbeite, ob der Benutzer die Maus über einem Div hat, wenn dies der Fall ist, wird ein anderes Element angezeigt und folgt der Maus herum. Wenn der Benutzer das div verlässt, wird das gezeigte Element ausgeblendet. So wie es jetzt funktioniert, habe ich das gezeigte Element, das die Maus auf dem maused-div zeigt und ihr folgt, aber es ist nicht genau das, was ich will. Ich möchte, dass es nicht angezeigt wird, wenn sich die Maus bewegt, sondern wenn sich die Maus nicht mehr bewegt.

HTML

<div class="tooltip"><p></p></div> 
<div class="holder" id="1"></div> 
<div class="holder" id="2"></div> 

CSS

.holder{ 
    display: block; 
    float: left; 
    margin-bottom: 0.25%; 
    width: 100%; 
    height: 200px; 
    cursor: pointer; 
    border-top: 1px solid rgb(100, 100, 0); 
    border-bottom: 1px solid rgb(100, 100, 0); 
} 
.tooltip{ 
    position: absolute; 
    display: none; 
    width: 150px; 
    background-color: white; 
    z-index: 5; 
} 

JS

var holder = document.getElementsByClassName("holder"); 
var tooltip = document.getElementsByClassName("tooltip")[0]; 
for(var i = 0; i < holder.length; i++){ 
    var moving; 
    holder[i].onmouseover = function(ev){ 
     moving = false 
     tooltip.style.display = "block"; 
     tooltip.style.top = ev.clientY; 
     tooltip.style.left = ev.clientX; 
    } 
    holder[i].onmouseout = function(ev){ 
     moving = false 
     tooltip.style.display = "none"; 
     tooltip.style.top = ev.clientY; 
     tooltip.style.left = ev.clientX; 
    } 
    holder[i].onmousemove = function(ev){ 
     moving = true; 
    } 

    if(moving){ 
     tooltip.style.display = "none"; 
     tooltip.style.top = ev.clientY; 
     tooltip.style.left = ev.clientX; 
    } 
} 

Answer 1

Sie können diese mit "setTimeout" Spaß machen ction.

Wenn Sie Mausbewegungen verfolgen, setzen Sie "mouseMoved" auf aktuelle Millis. Und dann tun Sie etwas wie folgt aus:

setTimeout(function(){ 

    var now = new Date(); 
    var nowMillis = d.getMilliseconds(); 
    var timeDiff = nowMillis - mouseMoved; 
    if (timeDiff > 3000) 
     alert("mouse stopped moving for 3 seconds"); 
}, 3000); 

Answer 2

Ein naiver Ansatz würde einen Timer eingestellt werden, wenn onmousemove genannt wird. Wenn der Timer abgelaufen ist, mache das Verstecken. Wenn onmousemove erneut aufgerufen wird, setzen Sie das Zeitlimit des Timers zurück.

Es ist ein Urteilsspruch für die Anwendung zu machen, wenn jemand aufhört, die Maus zu bewegen. Technisch bedeutet eine kontinuierliche Bewegung einer Maus ein Mausbewegungsereignis pro Pixel.

Sie müssen ein bisschen klug dabei sein, weil onmousemove viel aufgerufen wird. Vielleicht so etwas wie dieses:

var mouseStartedMoving = false; 
var mouseMoved = false; 
const MINIMUM_MOUSE_MOVE_TIME = 100; 

setInterval(() => { 
    if(!mouseMoved && mouseStartedMoving) { 
     //Mouse stopped moving 
     //Do CSS change 
     mouseStartedMoving = false; 
    } 
    mouseMoved = false; 
}, MINIMUM_MOUSE_MOVE_TIME); 

holder[i].onmousemove = function(ev){ 
    mouseStartedMoving = true; 
    mouseMoved = true; 
}