Frage

Hallo: wenn ich eine mouseout Ereignis an ein übergeordnetes Element hinzuzufügen, so scheint es, dass alle seine Kinder sind diese Veranstaltung auch hinzugefügt, es funktioniert gut, wenn das Ereignis ein Mausklick und etc.

Jedoch für das mouseout Ereignis, das wird ein unerwartetes Ergebnis führen.

Werfen Sie einen Blick auf dieses Beispiel:

<html>
    <head>
        <script type="text/javascript">
            function init(){
                document.getElementById('par').onmouseout=function(){alert('mouse out')};
            }
    </script>
    </head>
    <body onload='init()'>
        <div id="par" style="width:400px;height:300px">
            <div style="background-color:red;width:100%;height:150px"></div>
            <div style="background-color:black;width:100%;height:150px"></div>
        </div>
    </body>
</html>

Bewegen Sie bitte aus dem roten div zum schwarzen div, dann der schwarzen div bewegen, dann werden Sie zwei Alarm-Fenster, ich will nur eins.

So wie man es beheben?

War es hilfreich?

Lösung

Das ist nicht möglich, mit Klar Javascript ohne Leave Veranstaltung, die, meines Wissens, wird nur von Internet Explorer unterstützt.

Javascript Toolkits eine Lösung bieten, jQuery zum Beispiel emuliert dieses Ereignis:

  

Die mouseleave Veranstaltung unterscheidet sich von   mouseout in der Art der Verarbeitung von Ereignis   sprudeln. Wenn mouseout wurden verwendet in   Dieses Beispiel dann, wenn die Maus   Zeiger bewegt aus der Inner   Element, würde der Handler sein   Ausgelöst. Dies ist in der Regel unerwünscht   Verhalten. Das mouseleave Ereignis, auf   Auf der anderen Seite löst nur sein   Handler, wenn die Maus der Blätter   Element es gebunden ist, zu, kein   Nachfahre. So in diesem Beispiel der   Handler wird ausgelöst, wenn die Maus   Blättern Sie die Outer Element, aber nicht die    Inner Element.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top