Ich habe Probleme mit der onmouseout
Funktion in einem absolut positionierten Div. Wenn die Maus auf ein untergeordnetes Element im div trifft, wird das mouseout-Ereignis ausgelöst, aber ich möchte nicht, dass es ausgelöst wird, bis sich die Maus außerhalb des übergeordneten absoluten div befindet.
Wie kann ich verhindern, dass das mouseout
Ereignis ausgelöst wird, wenn es auf ein untergeordnetes Element OHNE jquery trifft?
Ich weiß, dass dies etwas mit dem Sprudeln von Ereignissen zu tun hat, aber ich habe kein Glück, herauszufinden, wie ich das herausfinden kann.
Ich habe hier einen ähnlichen Beitrag gefunden: Wie deaktiviere ich Mouseout-Ereignisse, die von untergeordneten Elementen ausgelöst werden?
Diese Lösung verwendet jedoch jQuery.
Antworten:
Ich habe eine schnelle JsFiddle-Demo mit all dem benötigten CSS und HTML erstellt.
EDIT feste Querung für Cross-Browser - Unterstützung http://jsfiddle.net/RH3tA/9/
HINWEIS : Dies überprüft nur das unmittelbare übergeordnete Element. Wenn das übergeordnete div verschachtelte Kinder hatte, müssen Sie die Elemente, die Eltern suchen, auf irgendeine Weise durchlaufen, um nach dem "ursprünglichen Element" zu suchen.
BEARBEITEN Sie ein Beispiel für verschachtelte Kinder
BEARBEITEN Für hoffentlich browserübergreifend behoben
Und ein neuer JSFiddle , EDIT aktualisierter Link
quelle
mouseleave
ist die richtige AntwortVerwenden Sie
onmouseleave
.Oder verwenden Sie in jQuery
mouseleave()
Es ist genau das, wonach Sie suchen. Beispiel:
oder in jQuery:
Ein Beispiel ist hier .
quelle
onMouseLeave
ist das, was ich letztendlich auch benutzt habe, da es nicht sprudelt.mouseleave
kann nicht stornierbar sein.Für eine einfachere reine CSS-Lösung , die in einigen Fällen funktioniert ( IE11 oder neuer ), kann man Kinder entfernen,
pointer-events
indem man sie auf setztnone
quelle
pointer-events
Eigenschaft vorHier ist eine elegantere Lösung, die auf den folgenden Informationen basiert. Es ist für Ereignisse verantwortlich, die von mehr als einer Ebene von Kindern ausgehen. Es berücksichtigt auch browserübergreifende Probleme.
quelle
this
von der Funktionsdefinitionszeile @GregoryLewis erwähnt das Problem behoben. Versuchen Sie dies auch, um mehr browserübergreifende Unterstützung zu erhalten: if (window.addEventListener) {document.getElementById ('parent'). AddEventListener ('mouseout', onMouseOut, true); } else if (window.attachEvent) {document.getElementById ('parent'). attachEvent ("onmouseout", onMouseOut); }Vielen Dank an Amjad Masad, der mich inspiriert hat.
Ich habe die folgende Lösung, die in IE9, FF und Chrome zu funktionieren scheint, und der Code ist ziemlich kurz (ohne den komplexen Abschluss und die transversalen untergeordneten Dinge):
quelle
Verwenden Sie anstelle von onmouseout onmouseleave.
Sie haben uns Ihren spezifischen Code nicht gezeigt, daher kann ich Ihnen in Ihrem spezifischen Beispiel nicht zeigen, wie es geht.
Aber es ist sehr einfach: Ersetzen Sie einfach onmouseout durch onmouseleave.
Das ist alles :) Also einfach :)
Wenn Sie sich nicht sicher sind, wie es geht, lesen Sie die Erklärung zu:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out
Ruhe des Kuchens :) Genießen Sie es :)
quelle
Wenn Sie jQuery verwenden, können Sie auch die Funktion "mouseleave" verwenden, die all dies für Sie erledigt.
do_something wird ausgelöst, wenn die Maus das Zieldiv oder eines ihrer untergeordneten Elemente betritt. do_something_else wird nur ausgelöst, wenn die Maus das Zieldiv und eines ihrer untergeordneten Elemente verlässt.
quelle
Ich denke, Quirksmode hat alle Antworten, die Sie benötigen (unterschiedliches Browsing- Verhalten des Browsers und Mouseenter- / Mouseleave- Ereignisse), aber ich denke, die häufigste Schlussfolgerung für dieses Ereignis ist die Verwendung eines Frameworks wie JQuery oder Mootools (mit dem Mouseenter) und Mausblatt Ereignisse, die genau das sind, was Sie sich vorgestellt haben, würden passieren).
Schauen Sie sich an, wie sie es machen, wenn Sie möchten, machen Sie es selbst
oder Sie können Ihre benutzerdefinierte "Lean Mean" -Version von Mootools nur mit dem Ereignisteil (und seinen Abhängigkeiten) erstellen .
quelle
Versuchen
mouseleave()
Beispiel:
;)
quelle
Ich habe eine sehr einfache Lösung gefunden,
Verwenden Sie einfach das Ereignis onmouseleave = "myfunc ()" als das Ereignis onmousout = "myfunc ()"
In meinem Code hat es funktioniert !!
Beispiel:
Gleiches Beispiel mit Mouseout-Funktion:
Ich hoffe es hilft :)
quelle
Obwohl die von Ihnen genannte Lösung jquery, mouseenter und mouseleave verwendet, handelt es sich um native dom-Ereignisse, sodass Sie sie möglicherweise ohne jquery verwenden.
quelle
Es gibt zwei Möglichkeiten, damit umzugehen.
1) Überprüfen Sie das Ergebnis event.target in Ihrem Rückruf, um festzustellen, ob es mit Ihrem übergeordneten div übereinstimmt
2) Oder verwenden Sie die Ereigniserfassung und rufen Sie event.stopPropagation in der Rückruffunktion auf
quelle
Ich mache es wie ein Zauber damit:
Ah, und
MyDiv
Tag ist wie folgt:Auf diese Weise, wenn ein Mausausgang zu einem Kind, Enkelkind usw. geht
style.display='none'
wird das nicht ausgeführt . aber wenn onmouseout MyDiv verlässt, läuft es.Sie müssen also nicht die Ausbreitung stoppen, Timer verwenden usw.
Vielen Dank für Beispiele, ich könnte diesen Code daraus machen.
Hoffe das hilft jemandem.
Kann auch so verbessert werden:
Und dann die DIVs-Tags wie folgt:
Also allgemeiner, nicht nur für ein Div und keine Notwendigkeit,
id="..."
jede Ebene hinzuzufügen .quelle
Wenn Sie Zugriff auf das Element haben, an das das Ereignis innerhalb der
mouseout
Methode angehängt ist , können Sie verwenden,contains()
um festzustellen, obevent.relatedTarget
es sich um ein untergeordnetes Element handelt oder nicht.Da
event.relatedTarget
das Element hat in , auf die die Maus übergeben, wenn es nicht ein untergeordnetes Element ist, haben Sie des Elements moused aus.quelle
Auf Winkel 5, 6 und 7
Dann weiter
quelle
Ich überprüfe den Versatz des ursprünglichen Elements, um die Seitenkoordinaten der Elementgrenzen zu erhalten, und stelle dann sicher, dass die Mouseout-Aktion nur ausgelöst wird, wenn das Mouseout außerhalb dieser Grenzen liegt. Schmutzig, aber es funktioniert.
quelle
quelle
Wenn Sie dem übergeordneten Element eine CSS-Klasse oder -ID hinzugefügt haben (oder haben), können Sie Folgendes tun:
Sachen werden also nur ausgeführt, wenn sich das Ereignis auf dem übergeordneten Div befindet.
quelle
Ich wollte nur etwas mit dir teilen.
Ich habe es schwer mit
ng-mouseenter
undng-mouseleave
Ereignissen.Die Fallstudie:
Ich habe ein schwebendes Navigationsmenü erstellt, das umgeschaltet wird, wenn sich der Cursor über einem Symbol befindet.
Dieses Menü befand sich oben auf jeder Seite.
ng-class="{down: vm.isHover}"
ng-mouseenter="vm.isHover = true"
ng-mouseleave="vm.isHover = false"
Im Moment war alles in Ordnung und funktionierte wie erwartet.
Die Lösung ist sauber und einfach.
Das eingehende Problem:
In einer bestimmten Ansicht habe ich eine Liste von Elementen.
Ich habe ein Aktionsfeld hinzugefügt, wenn sich der Cursor über einem Element der Liste befindet.
Ich habe den gleichen Code wie oben verwendet, um das Verhalten zu behandeln.
Das Problem:
Ich habe herausgefunden, dass sich ein Cursor im schwebenden Navigationsmenü und auch oben auf einem Element befindet und dass es einen Konflikt untereinander gibt.
Das Aktionsfeld wurde angezeigt und die schwebende Navigation wurde ausgeblendet.
Die Sache ist, dass selbst wenn sich der Cursor über dem schwebenden Navigationsmenü befindet, das Listenelement ng-mouseenter ausgelöst wird.
Es macht für mich keinen Sinn, weil ich eine automatische Unterbrechung der Mausausbreitungsereignisse erwarten würde.
Ich muss sagen, dass ich enttäuscht war und einige Zeit damit verbringe, dieses Problem herauszufinden.
Erste Gedanken:
Ich habe versucht, diese zu verwenden:
$event.stopPropagation()
$event.stopImmediatePropagation()
Ich habe viele ng-Zeigerereignisse (mousemove, mouveover, ...) kombiniert, aber keine hilft mir.
CSS-Lösung:
Ich fand die Lösung mit einer einfachen CSS-Eigenschaft, die ich immer häufiger verwende:
Grundsätzlich benutze ich es so (auf meinen Listenelementen):
Mit diesem kniffligen Ereignis werden die ng-mouse-Ereignisse nicht mehr ausgelöst und mein schwebendes Navigationsmenü schließt sich nicht mehr, wenn sich der Cursor darüber und über einem Element aus der Liste befindet.
Um weiter zu gehen:
Wie zu erwarten, funktioniert diese Lösung, aber ich mag sie nicht.
Wir kontrollieren unsere Ereignisse nicht und es ist schlecht.
Außerdem müssen Sie Zugriff auf das
vm.isHover
Oszilloskop haben, um dies zu erreichen, und es ist möglicherweise nicht möglich oder möglich, aber auf die eine oder andere Weise schmutzig.Ich könnte eine Geige machen, wenn jemand schauen will.
Trotzdem habe ich keine andere Lösung ...
Es ist eine lange Geschichte und ich kann dir keine Kartoffel geben, also vergib mir bitte, mein Freund.
Wie auch immer,
pointer-events: none
ist das Leben, also erinnere dich daran.quelle