Was ist der Unterschied zwischen jQuerys mouseout () und mouseleave ()?

Was ist der Unterschied zwischen jQuerys mouseout () und mouseleave ()?

Das Mouseleave-Ereignis unterscheidet sich vom Mouseout in der Art und Weise, wie es mit dem Sprudeln von Ereignissen umgeht. Wenn in diesem Beispiel Mouseout verwendet würde, würde der Handler ausgelöst, wenn der Mauszeiger aus dem inneren Element herausbewegt würde. Dies ist normalerweise ein unerwünschtes Verhalten. Das Mouseleave-Ereignis hingegen löst seinen Handler nur aus, wenn die Maus das Element verlässt, an das sie gebunden ist, und keinen Nachkommen. In diesem Beispiel wird der Handler ausgelöst, wenn die Maus das äußere Element verlässt, nicht jedoch das innere Element.

Quelle: http://api.jquery.com/mouseleave/

Es kann Zeiten geben, in denen mouseouteine bessere Wahl ist als mouseleave.

Angenommen, Sie haben einen Tooltip erstellt, der neben einem Element angezeigt werden soll mouseenter. Sie verwenden setTimeoutdiese Option, um zu verhindern, dass der Tooltip sofort angezeigt wird. Sie löschen das Zeitlimit bei der mouseleaveVerwendung. clearTimeoutWenn die Maus den Tooltip verlässt, wird er nicht angezeigt. Dies funktioniert in 99% der Fälle.

Angenommen, das Element, an das Sie einen Tooltip angehängt haben, ist eine Schaltfläche mit einem clickEreignis. Nehmen wir außerdem an, dass diese Schaltfläche den Benutzer entweder mit einem confirmoder mit einem alertKästchen auffordert . Der Benutzer klickt auf die Schaltfläche und das alertFeuer. Der Benutzer drückte schnell genug darauf, dass Ihr Tooltip keine Chance hatte, aufzutauchen (bisher so gut).

Der Benutzer drückt die alertOK-Taste und die Maus verlässt das Element. Da sich die Browserseite jetzt in einem gesperrten Zustand befindet, wird kein Javascript ausgelöst, bis die OK-Taste gedrückt wurde, was bedeutet, dass Ihr mouseleaveEreignis NICHT FEUERT . Nachdem der Benutzer OK gedrückt hat, wird der Tooltip angezeigt (was nicht das ist, was Sie wollten).

Die Verwendung mouseoutin diesem Fall wäre die geeignete Lösung, da sie ausgelöst wird.

jQuery API-Dokument:

mouseout

Dieser Ereignistyp kann aufgrund von Ereignisblasen viele Kopfschmerzen verursachen. Wenn sich der Mauszeiger in diesem Beispiel beispielsweise aus dem inneren Element herausbewegt, wird ein Mouseout-Ereignis an dieses Element gesendet, das dann zu Outer rinnt. Dies kann den gebundenen Mouseout-Handler zu ungünstigen Zeiten auslösen. Eine nützliche Alternative finden Sie in der Diskussion zu .mouseleave ().

So mouseleave gilt auch für ein benutzerdefiniertes Ereignis, das aus dem oben genannten Grund entworfen wurde.

http://api.jquery.com/mouseleave/

Event Mouseout wird ausgelöst, wenn die Maus das ausgewählte Element verlässt und wenn die Maus auch die untergeordneten Elemente verlässt.

Event Mouseleave-Element wird ausgelöst, wenn der Zeiger nur das ausgewählte Element verlässt.

Referenz: W3School