Unterschied zwischen mouseout () und mouseleave () in jQuery

In jQuery werden sowohlmouseout()- als auchmouseleave()-Ereignisse ausgelöst, wenn die Maus das übereinstimmende Element verlässt. Der einzige Unterschied besteht in der Art des Handles "event bubbling" im untergeordneten Element. Sehen wir uns zwei Szenarien an:

1. KEIN Kindelement

Wenn die übereinstimmenden Elemente kein untergeordnetes Element haben, funktionieren die Ereignissemouseout() undmouseleave()genau gleich. Probieren Sie es unten aus.

2. MIT Kindelement nach innen

Wenn die übereinstimmenden Elemente ein untergeordnetes Element haben, funktionieren sowohlmouseout() als auchmouseleave() Ereignisse anders als „event bubbling“:

Beispielsweise enthält eine "OuterBox" ein untergeordnetes Element "InnerBox".

OuterBox
    InnerBox

P.S Assure both outerBox and innerBox are attached to certain events.

mouseout()

Wenn die Maus die "OuterBox" betritt, wird kein Ereignis ausgelöst.
Wenn die Maus die "OuterBox" verlässt und die "InnerBox" betritt, wird das "OuterBox" -Ereignis ausgelöst.
Wenn die Maus die "innerBox" verlässt und in die "outerBox" eintritt, wird das "innerBox" -Ereignis ausgelöst, gefolgt vom "outerBox" -Ereignis.
Wenn die Maus die "OuterBox" verlässt, wird das "OuterBox" -Ereignis ausgelöst.

mouseleave()

Wenn die Maus die "OuterBox" betritt, wird kein Ereignis ausgelöst.
Wenn die Maus die "OuterBox" verlässt und die "InnerBox" betritt, wird kein Ereignis ausgelöst.
Wenn die Maus die "innerBox" verlässt und in die "outerBox" eintritt, wird das "innerBox" -Ereignis ausgelöst.
Wenn die Maus die "OuterBox" verlässt, wird das "OuterBox" -Ereignis ausgelöst.

Lassen Sie es uns anhand des folgenden Beispiels verstehen:

Versuch es selber










  jQuery mouseout() vs mouseleave() example


  
      mouseout() - no child element
      OuterBox
      
      #mouseout is fired : 0
  

  
      mouseleave() - no child element
      OuterBox
      
      #mouseleave is fired : 0
  





  
      mouseout() - with child elements
      OuterBox
        InnerBox
        
      
      #mouseout outer is fired : 0
          

      #mouseout inner is fired : 0
  

  
      mouseleave() - with child elements
      OuterBox
        InnerBox
        
      
      #mouseleave outer is fired : 0
          

      #mouseleave inner is fired : 0

Probieren Sie die Demo aus

TOC

Unterschied zwischen mouseout () und mouseleave () in jQuery