Bubbling problem solution based on mouseout and mouseover etc

  • 2020-03-29 23:48:32
  • OfStack

Recently write something, more annoying, a pop-up layer, there are other elements above, the intention is to leave the mouse pop-up layer, perform some actions, but in practice, the mouse left the pop-up layer elements, will also activate these actions. The stop event bubbling method of each browser was tried, but failed.

Or we javaeye is a lot of people, in a buddy blog found the following code:

  function isMouseLeaveOrEnter(e, handler) {    
        if (e.type != 'mouseout' && e.type != 'mouseover') return false;    
         var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;    
         while (reltg && reltg != handler)    
            reltg = reltg.parentNode;    
         return (reltg != handler);    

This is done by determining whether the current element is the one to execute the mouseout event, thus avoiding the above problem.

Related articles: