Différent entre mouseout () et mouseleave () dans jQuery

Dans jQuery, les événementsmouseout() etmouseleave() sont déclenchés lorsque la souris quitte l'élément correspondant. La seule différence réside dans la manière du handle "event bubbling" dans l'élément enfant, voyons deux scénarios:

1. AUCUN élément enfant

Si les éléments correspondants n'ont pas d'élément enfant, les événementsmouseout() etmouseleave() fonctionnent exactement de la même manière. Voir l'essayer vous-même ci-dessous.

2. AVEC élément enfant à l'intérieur

Si les éléments correspondants ont un élément enfant, les événementsmouseout() etmouseleave() fonctionnent différemment à la manière de «event bubbling»:

Par exemple, un "externalBox" contient un élément enfant "innerBox".

OuterBox
    InnerBox

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

mouseout()

Lorsque la souris entre dans la "boîte extérieure", aucun événement ne se déclenche.
Lorsque la souris quitte la "boîte extérieure" et entre dans "boîte intérieure", déclenchez l'événement "boîte extérieure".
Lorsque la souris quitte la "boîte intérieure" et entre dans "boîte extérieure", déclenchez l'événement "boîte intérieure", suivi de l'événement "boîte extérieure".
Lorsque la souris quitte la «boîte extérieure», déclenchez l'événement «boîte extérieure».

mouseleave()

Lorsque la souris entre dans la "boîte extérieure", aucun événement ne se déclenche.
Lorsque la souris quitte la "boîte extérieure" et entre dans la "boîte intérieure", aucun événement ne se déclenche.
Lorsque la souris quitte la "boîte intérieure" et entre dans "boîte extérieure", déclenchez l'événement "boîte intérieure".
Lorsque la souris quitte la «boîte extérieure», déclenchez l'événement «boîte extérieure».

Comprenons-le en jouant l'exemple ci-dessous:

Essayez-le vous-même










  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

Essayez la démo

TOC

Différent entre mouseout () et mouseleave () dans jQuery