Aktives Element verschieben verliert Mouseout-Ereignis im Internet Explorer

Question

Sep 10, 2010, 05:52 PM

raphael mouseevent javascript javascript-events mouseout

Aktives Element verschieben verliert Mouseout-Ereignis im Internet Explorer

In einer Bibliothek, die ich benutze, habe ich die Aufgabe, ein Element in den Vordergrund des Doms zu verschieben, wenn es darüber schwebt. (Ich mache es größer, also muss ich es sehen und es dann zurückschrumpfen, wenn ich die Maus rauslasse.)

Die Bibliothek, die ich verwende, hat eine saubere Lösung, die appendChildren für das aktive Element verwendet, um es an das Ende des übergeordneten Elements zu verschieben, also weiter in Richtung des Endes des Doms und wiederum oben.

Das Problem ist meiner Meinung nach, dass das Element, das Sie verschieben, dasjenige ist, über dem Sie den Mauszeiger bewegen, verloren ist. Ihre Maus befindet sich immer noch über dem Knoten, aber das mouseout-Ereignis wird nicht ausgelöst.

Ich habe die Funktionalität eingeschränkt, um das Problem zu bestätigen. Es funktioniert gut in Firefox, aber nicht in jeder Version des IE. Ich benutze JQuery hier für Geschwindigkeit. Lösungen können in einfachem, altem Javascript sein. Dies wäre eine Vorliebe, da es möglicherweise erforderlich ist, den Datenstrom wiederherzustellen.

Ich kann hier keinen Z-Index verwenden, da die Elemente vml sind, die Bibliothek Raphael ist und ich den Aufruf toFront verwende. Beispiel mit ul / li, um das Problem in einem einfachen Beispiel zu zeigen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
    li
    {
        border:1px solid black;
    }
</style>
</head>
<body>
<ul><li>Test 1</li></ul>
<ul><li>Test 2</li></ul>
<ul><li>Test 3</li></ul>
<ul><li>Test 4</li></ul>
<script>
$(function(){
    $("li").mouseover(function(){
        $(this).css("border-color","red");
        this.parentNode.appendChild(this);
    });

    $("li").mouseout(function(){
        $(this).css("border-color","black");
    });
});
</script>
</body>
</html>

Bearbeiten Hier ist ein Link zu einem js-Einfügebehälter, um ihn in Aktion zu sehen.http: //jsbin.com/obesa

** Bearbeiten 2: ** Alle Kommentare zu allen Antworten vor dem Posten anzeigen.

Zu kommentieren