Ich habe das folgende Problem unter Internet Explorer 7/8:
Ich habe ein Popup, das aktiviert wird, wenn der Benutzer einen Link über einen Link bewegt. Das Popup ist ein einfaches <div> , das einige Daten enthält. Innerhalb dieses <div> -Tags gibt es ein <select> -Tag mit einigen <option> s. Ich habe mouseover / mouseout-Ereignisse an die <div & gt; angeschlossen, so dass dieses Popup geöffnet bleibt, während der Cursor darüber ist. Das Problem tritt auf, wenn Sie auf <select> klicken und dann den Cursor über eines der <option> s bewegen. Dies löst das mouseout-Ereignis des <div> -Tags aus bzw. schließt es.
Wie kann ich das Schließen des Popup im IE verhindern?
Sie sollten feststellen können, ob die Situation nur mit den Werten des Ereignisses übereinstimmt. Es ist ein wenig verschachtelt, aber es scheint zu funktionieren.
Im Ereignishandler Ihrer äußeren div , tun Sie etwas wie folgt:
Implementiere dann die Methode isReal :
Grundsätzlich erkennt die Methode isReal nur, ob das Ereignis aus dem div kommt. Wenn dies der Fall ist, gibt es false zurück, wodurch vermieden wird, den Befehl zum Ausblenden aufzurufen.
Mein Vorschlag wäre, ein anderes Flag zu setzen, während das Auswahlfeld den Fokus hat. Schließen Sie das Div nicht, während das Flag gesetzt ist.
Was ist mit so etwas:
%Vor%Die Grundidee ist, dass Sie das Containerelement anzeigen, wenn Sie den Mauszeiger über den Auslöser bewegen. Wenn Sie den Container dann verlassen, wird der Container ausgeblendet. Sie müssten den Container so positionieren, dass er das Triggerelement schneidet, sonst würde es sich sofort verstecken.
Warum mouseover / mouseout auf <div> ? Warum nicht einfach <div> auf der Maus zeigen, dann <body onmouseover="hidedivs();"> einstellen Ich weiß nicht, ob das funktionieren würde, aber wenn <div> über dem Körper steht, dann sollte <div> sichtbar bleiben.
Viele Leute, die Lösungen / Beispiele posten, scheinen eines nicht zu realisieren: onmouseout-Ereignis auf <div> wird vor onmouseover-Ereignis auf <select> ausgelöst.
Wenn <div> den Fokus verliert (onmouseout), schließe es nicht sofort, sondern nach 500 Millisekunden. Wenn während dieser Zeit <select> den Fokus erhält (mouseover), schließe <div> überhaupt nicht (clearTimeout).
Versuchen Sie auch, mit Ereignispropagation / bubling zu spielen.
Angesichts der Tatsache, dass die Auswahl in IE ein Problem ist, insbesondere wenn es um das gesamte Layering-Problem geht, wo eine Auswahl über einem Div angezeigt wird, obwohl dies nicht der Fall sein sollte, kann ich Sie in die Richtung der YUI-Menüschaltflächen verweisen. Sie sehen wirklich gut aus, sind einfach zu implementieren und werden dieses Problem nicht verursachen
Hier ist ein Link: Ссылка
Fügen Sie im mouseout-Ereignis für das div dem Element div ein Zeitlimit hinzu, das das div in etwa 200 Millisekunden ausblendet.
Dann löschen Sie im mouseover-Ereignis für div / select und das click-Ereignis der Auswahl das im div-Element gespeicherte Zeitlimit.
Dies führt zu einer sehr kurzen Verzögerung, bevor das div ausgeblendet wird, wodurch die mouseover- oder click-Ereignisse das Zeitlimit vor der Ausführung löschen können. Es ist nicht schön, aber es sollte funktionieren.
Anstatt mouseout als Ereignis zu verwenden, um das div zu schließen, benutze mouseleave, dann wird das Ereignis nur ausgelöst, wenn der Zeiger die Grenze des div verlässt, nicht wenn es sich auf andere Elemente innerhalb des div bewegt
Nun, der Grund für dieses Verhalten liegt darin, dass die mouseover / out-Ereignisse platzen, was bedeutet, dass jedes Mal, wenn Sie eines der Elemente innerhalb des Popup-Popupmenüs bewegen, das Popup das Ereignis ebenfalls empfängt.
Sie können weitere hier über diese Ereignisse lesen und hier über Event-Sprudeln.
Sie haben hier drei mögliche Lösungen:
Ändern Sie die Ereignisse in onmouseenter / leave. Du hast erwähnt, dass das nicht geholfen hat, was einfach merkwürdig klingt, da diese nicht blubbern sollen.
Überprüfen Sie srcElement in Bezug auf from / toElement im Ereignis.
Eine verbesserte Version von McKAMEY würde folgendermaßen aussehen:
%Vor%Macht dasselbe, nur kürzer.
3. Eine andere Option wäre, ein transparentes, unsichtbares div direkt unter Ihrem Popup zu erstellen, das den Bereich abdeckt, in den die Auswahlbox hineinfällt. Ich gehe davon aus, dass es außerhalb des eigentlichen Popup-Bereichs fällt.
Hoffe, das hilft!
Tags und Links javascript internet-explorer jquery javascript-events