Отличается между mouseout () и mouseleave () в jQuery

Различаются между mouseout () и mouseleave () в jQuery

В jQuery событияmouseout() иmouseleave() запускаются, когда мышь покидает совпавший элемент. Единственное отличие - это способ дескриптора «event bubbling» в дочернем элементе, давайте рассмотрим два сценария:

1. НЕТ дочернего элемента

Если у совпадающих элементов нет дочернего элемента, событияmouseout() иmouseleave() работают точно так же. Смотрите сами попробуйте ниже.

2. С дочерним элементом внутри

Если у совпадающих элементов есть дочерний элемент, событияmouseout() иmouseleave() работают по-разному, как «event bubbling»:

Например, «externalBox» содержит дочерний элемент «innerBox».

OuterBox
    InnerBox

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

mouseout()

Когда мышь входит в «externalBox», никакое событие не сработает.
Когда мышь покидает «externalBox» и входит в «innerBox», запускается событие «externalBox».
Когда мышь покидает «innerBox» и входит в «externalBox», запускается событие «innerBox», за которым следует событие «externalBox».
Когда мышь уходит в «externalBox», запускает событие «externalBox».

mouseleave()

Когда мышь входит в «externalBox», никакое событие не сработает.
Когда мышь покидает «externalBox» и вводит «innerBox», никакое событие не сработает.
Когда мышь покидает «innerBox» и входит в «externalBox», запускается событие «innerBox».
Когда мышь уходит в «externalBox», запускает событие «externalBox».

Давайте разберемся в этом, воспользовавшись приведенным ниже примером:

Попробуй сам










  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

Попробуйте демо

TOC