das mouseout Ereignis auftreten mehr als einmal
-
28-09-2019 - |
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?
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 vonmouseout
in der Art der Verarbeitung von Ereignis sprudeln. Wennmouseout
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. Dasmouseleave
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.