Mouseover und Mouseout feuern nicht mit animierendem Element

Question

Ich muss erkennen, ob ein Benutzer über ein Element schwebt, was einfach ist. Diese Ereignisse scheinen jedoch nicht ausgelöst zu werden, wenn das Element animiert wird. Wenn Sie meine Geige ausprobieren, lassen Sie das Element einfach an der Maus vorbeilaufen, ohne die Maus zu bewegen, und Sie werden sehen, dass die Ereignisse nicht ausgelöst werden. Es macht Sinn, warum das passieren würde, aber ich habe keinen guten Weg gefunden, das gewünschte Verhalten zu erhalten, nämlich den Schwebeflug zu erkennen, selbst wenn der Benutzer seine Maus nicht bewegt und das Element darunter animiert .

Irgendwelche Gedanken?

Danke!

Hinweis: Lösungen ohne Verwendung von externen Bibliotheken sind optimal, aber jede Hilfe sehr geschätzt wird noch :)

HTML

<div id='moving'></div> 
<ul id="message"></ul> 

CSS

#moving { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    animation: move 7s linear; 
} 

@keyframes move { 
    from {transform: translateX(0px)} 
    to {transform: translateX(500px)} 
} 

JS

var counter = 0; 

document.getElementById("moving").addEventListener("mouseover", function(){ 
    counter++; 
    var node = document.createElement("LI"); 
    var textnode = document.createTextNode("Entered " + counter); 
    node.appendChild(textnode); 
    document.getElementById("message").appendChild(node); 
}); 

document.getElementById("moving").addEventListener("mouseout", function(){ 
    var node = document.createElement("LI"); 
    var textnode = document.createTextNode("Left " + counter); 
    node.appendChild(textnode); 
    document.getElementById("message").appendChild(node); 
}); 

Hier ist eine Geige davon: https://jsfiddle.net/w5j842Lx/

Answer 1

Schauen Sie diese bei jsfiddle https://jsfiddle.net/3vpaoj59/ Es enthält eine Funktion wie diese

setInterval(checkMouse, 100); 

, die im Grunde eine Funktion 10-mal pro Sekunde ruft, wenn die Maus des Koordinaten zu überprüfen sind in der animierten Form. Ihre Form ist ein Quadrat und kein Kreis, also müssten Sie etwas anderes tun. Dieser Code ist nett, weil er kein Plugin verwendet, aber er ist wahrscheinlich CPU-intensiv und hat in einigen Fällen eine schlechte Leistung.

Answer 2

Sie können überprüfen, ob die Maus innerhalb eines Intervalls ein- oder ausgeht. Hier ist eine working fiddle, die sich von deiner Geige erstreckt.

// This is the helper method I have written 
 
var addMoveListener = function(element, onmouseover, onmouseout) { 
 
    var over = false; 
 
    var mouseX, mouseY; 
 
    var checkOver = function(ev) { 
 
    if (ev) { 
 
     mouseX = ev.clientX; 
 
     mouseY = ev.clientY; 
 
    } 
 
    if (mouseX == null || mouseY == null) return; 
 

 
    var rect = element.getBoundingClientRect(); 
 
    var isInside = mouseX >= rect.left && mouseX < rect.right && mouseY >= rect.top && mouseY < rect.bottom; 
 
    if (over && !isInside && onmouseout) onmouseout(); 
 
    if (!over && isInside && onmouseover) onmouseover(); 
 
    over = isInside; 
 
    } 
 

 
    document.addEventListener("mousemove", checkOver); 
 
    var interval = setInterval(checkOver.bind(null, null), 100); 
 
} 
 

 
// Code below is for the sake of demonstration 
 
var counter = 0; 
 

 
var mouseovercallback = function() { 
 
    counter++; 
 
    console.log("Entered " + counter); 
 
}; 
 

 
var mouseoutcallback = function() { 
 
    console.log("Left " + counter); 
 
}; 
 

 
addMoveListener(document.getElementById("moving"), mouseovercallback, mouseoutcallback);

#moving { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    animation: move 7s linear; 
 
} 
 

 
@keyframes move { 
 
    from { 
 
    transform: translateX(0px) 
 
    } 
 
    to { 
 
    transform: translateX(500px) 
 
    } 
 
}

<div id='moving'></div>

Der Code prüft, ob die Maus für alle 100 Millisekunden und auch, wenn die Maus bewegt, enthalten ist. Wenn Sie Fälle bearbeiten möchten, in denen das Element kein Rechteck ist oder gedreht, verzerrt usw. ist, müssen Sie den Code verbessern.