Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery

Question

I am having trouble with the onmouseout function in an absolute positoned div  When the mouse hits a child element in the div  the mouseout event fires  but I do not want it to fire until the mouse is out of the parent  absolute div   How can I prevent the mouseout event from firing when it hits a child element WITHOUT jquery   I know this has something to do with event bubbling  but I am having no luck on finding out how to work this out    I found a similar post  here  How to disable mouseout events triggered by child elements   However that solution uses jQuery

User · Answer

I ve found a very simple solution    just use the onmouseleave  myfunc    event than the onmousout  myfunc    event  In my code it worked    Example    lt html gt   lt head gt   lt script type  text javascript  gt     function myFunc          document getElementById  hide div   style display    none           function ShowFunc          document getElementById  hide div   style display    block         lt  script gt   lt  head gt   lt body gt   lt div onmouseleave  myFunc    style  border double width 50  height 50  position absolute top 25  left 25    gt     Hover mouse here     lt div id  child div  style  border solid width 25  height 25  position absolute top 10  left 10    gt        CHILD  lt br  gt  It doesn t fires if you hover mouse over this child div     lt  div gt   lt  div gt   lt div id  hide div   gt TEXT lt  div gt   lt a href     onclick  ShowFunc    gt Show  TEXT  lt  a gt   lt  body gt   lt  html gt    Same Example with mouseout function    lt html gt   lt head gt   lt script type  text javascript  gt     function myFunc          document getElementById  hide div   style display    none           function ShowFunc          document getElementById  hide div   style display    block         lt  script gt   lt  head gt   lt body gt   lt div onmouseout  myFunc    style  border double width 50  height 50  position absolute top 25  left 25    gt     Hover mouse here     lt div id  child div  style  border solid width 25  height 25  position absolute top 10  left 10    gt        CHILD  lt br  gt  It fires if you hover mouse over this child div     lt  div gt   lt  div gt   lt div id  hide div  gt TEXT lt  div gt   lt a href     onclick  ShowFunc    gt Show  TEXT  lt  a gt   lt  body gt   lt  html gt    Hope it helps

User · Answer

I just wanted to share something with you  I got some hard time with ng-mouseenter and ng-mouseleave events     The case study     I created a floating navigation menu which is toggle when the cursor is over an icon  This menu was on top of each page    To handle show hide on the menu  I toggle a class  ng-class   down  vm isHover   To toggle vm isHover  I use the ng mouse events  ng-mouseenter  vm isHover   true  ng-mouseleave  vm isHover   false      For now  everything was fine and worked as expected  The solution is clean and simple     The incoming problem     In a specific view  I have a list of elements  I added an action panel when the cursor is over an element of the list  I used the same code as above to handle the behavior     The problem   I figured out when my cursor is on the floating navigation menu and also on the top of an element  there is a conflict between each other  The action panel showed up and the floating navigation was hide     The thing is that even if the cursor is over the floating navigation menu  the list element ng-mouseenter is triggered  It makes no sense to me  because I would expect an automatic break of the mouse propagation events  I must say that I was disappointed and I spend some time to find out that problem   First thoughts   I tried to use these      event stopPropagation    event stopImmediatePropagation     I combined a lot of ng pointer events  mousemove  mouveover       but none help me   CSS solution   I found the solution with a simple css property that I use more and more     pointer-events  none    Basically  I use it like that  on my list elements    ng-style    pointer-events   vm isHover    none           With this tricky one  the ng-mouse events will no longer be triggered and my floating navigation menu will no longer close himself when the cursor is over it and over an element from the list   To go further   As you may expect  this solution works but I don t like it  We do not control our events and it is bad  Plus  you must have an access to the vm isHover scope to achieve that and it may not be possible or possible but dirty in some way or another  I could make a fiddle if someone want to look   Nevertheless  I don t have another solution    It s a long story and I can t give you a potato so please forgive me my friend  Anyway  pointer-events  none is life  so remember it

User · Answer

For a simpler pure CSS solution that works in most cases  one could remove children s pointer-events by setting them to none  parent          pointer-events  none     Browser support  IE11

User · Answer

On Angular 5  6 and 7   lt div  mouseout   onMouseOut  event         mouseenter   onMouseEnter  event   gt  lt  div gt    Then on  import  Component Renderer2  from   angular core        Component    selector   app-test    templateUrl     test component html    styleUrls      test component scss      export class TestComponent implements OnInit  OnDestroy        public targetElement  HTMLElement    constructor private  renderer  Renderer2         ngOnInit    void        ngOnDestroy    void       Maybe reset the targetElement      public onMouseEnter event   void     this targetElement   event target    event srcElement    console log  Mouse Enter   this targetElement        public onMouseOut event   void     const elementRelated   event toElement    event relatedTarget    if  this targetElement contains elementRelated         return        console log  Mouse Out

User · Answer

Although the solution you referred to uses jquery  mouseenter and mouseleave are native dom events  so you might use without jquery

User · Answer

If you added  or have  a CSS class or id to the parent element  then you can do something like this     lt div id  parent  gt     lt div gt     lt  div gt   lt  div gt   JavaScript  document getElementById  parent   onmouseout   function e      e   e   e   window event   For IE   if e target id     parent           Do your stuff         So stuff only gets executed when the event is on the parent div

User · Answer

var elem       some-id    elem mouseover function            Some code here    mouseout function  event       var e   event toElement    event relatedTarget     if  elem has e  length  gt  0  return         Some code here

User · Answer

I make it work like a charm with this   function HideLayer theEvent    var MyDiv document getElementById  MyDiv     if MyDiv    theEvent window event theEvent target      MyDiv style display  none          Ah  and MyDiv tag is like this    lt div id  MyDiv  onmouseout  JavaScript  HideLayer event    gt    lt  -- Here whatever divs  inputs  links  images  anything you want    -- gt   lt div gt    This way  when onmouseout goes to a child  grand-child  etc    the style display  none  is not executed  but when onmouseout goes out of MyDiv it runs   So no need to stop propagation  use timers  etc     Thanks for examples  i could make this code from them   Hope this helps someone   Also can be improved like this   function HideLayer theLayer theEvent    if theLayer    theEvent window event theEvent target      theLayer style display  none          And then the DIVs tags like this    lt div onmouseout  JavaScript  HideLayer this event    gt    lt  -- Here whatever divs  inputs  links  images  anything you want    -- gt   lt div gt    So more general  not only for one div and no need to add id       on each layer

User · Answer

Here s a more elegant solution based on what came below  it accounts for event bubbling up from more than one level of children  It also accounts for cross-browser issues   function onMouseOut this  event      this is the original element the event handler was assigned to    var e   event toElement    event relatedTarget     check for all children levels  checking from bottom up  while e  amp  amp  e parentNode  amp  amp  e parentNode    window        if  e parentNode    this    e    this            if e preventDefault  e preventDefault            return false            e   e parentNode       Do something u need here    document getElementById  parent   addEventListener  mouseout  onMouseOut true

User · Answer

Use onmouseleave   Or  in jQuery  use mouseleave    It is the exact thing you are looking for  Example    lt div class  outer  onmouseleave  yourFunction    gt       lt div class  inner  gt       lt  div gt   lt  div gt    or  in jQuery        outer   mouseleave function          your code here       an example is here

User · Answer

If you have access to the element which the event is attached to inside the mouseout method  you can use contains   to see if the event relatedTarget is a child element or not    As event relatedTarget is the element to which the mouse has passed into  if it isn t a child element  you have moused out of the element   div onmouseout   function  event        if   div contains event relatedTarget                moused out of div

User · Answer

I check the original element s offset to get the page coordinates of the element s bounds  then make sure the mouseout action is only triggered when the mouseout is out of those bounds   Dirty but it works     el  live  mouseout   function event       while checkPosition this  event            console log  mouseovering including children             console log  moused out of the whole       var checkPosition   function el  event       var position     el  offset       var height     el  height       var width     el  width       if  event pageY  gt  position top     event pageY  lt   position top   height      event pageX  gt  position left     event pageX  lt   position left   width        return true

User · Answer

function onMouseOut event              this is the original element the event handler was assigned to         var e   event toElement    event relatedTarget          if  e parentNode    this    e    this               return                alert  MouseOut           handle mouse event here       document getElementById  parent   addEventListener  mouseout  onMouseOut true     I made a quick JsFiddle demo  with all the CSS and HTML needed  check it out       EDIT FIXED link for cross-browser support http   jsfiddle net RH3tA 9   NOTE that this only checks the immediate parent  if the parent div had nested children then you have to somehow traverse through the elements parents looking for the  Orginal element     EDIT example for nested children   EDIT Fixed for hopefully cross-browser  function makeMouseOutFn elem       var list   traverseChildren elem       return function onMouseOut event            var e   event toElement    event relatedTarget          if     list indexOf e                 return                    alert  MouseOut               handle mouse event here              using closure to cache all child elements var parent   document getElementById  parent    parent addEventListener  mouseout  makeMouseOutFn parent  true      quick and dirty DFS children traversal   function traverseChildren elem       var children           var q           q push elem       while  q length  gt  0          var elem   q pop          children push elem         pushAll elem children             function pushAll elemArray         for var i 0  i  lt  elemArray length  i              q push elemArray i                      return children      And a new JSFiddle  EDIT updated link

User · Answer

Thanks to Amjad Masad that inspired me   I ve the following solution which seems to work in IE9  FF and Chrome and the code is quite short  without the complex closure and transverse child things         DIV onmouseout function e              check and loop relatedTarget parentNode            ignore event triggered mouse overing any child element or leaving itself         var obj e relatedTarget          while obj  null               if obj  this                   return                            obj obj parentNode                       now perform the actual action you want to do only when mouse is leaving the DIV

User · Answer

There are a simple way to make it work  The element and all childs you set a same class name  then  element onmouseover   function event    if  event target className     quot name quot       code

User · Answer

If you re using jQuery you can also use the  mouseleave  function  which deals with all of this for you       thetargetdiv   mouseenter do something       thetargetdiv   mouseleave do something else     do something will fire when the mouse enters thetargetdiv or any of its children  do something else will only fire when the mouse leaves thetargetdiv and any of its children

User · Answer

There are two ways to handle this   1  Check the event target result in your callback to see if it matches your parent div  var g ParentDiv   function OnMouseOut event        if  event target    g ParentDiv            return               handle mouse event here       window onload   function         g ParentDiv   document getElementById  parentdiv        g ParentDiv onmouseout   OnMouseOut       lt div id  parentdiv  gt       lt img src  childimage jpg  id  childimg    gt   lt  div gt    2  Or use event capturing and call event stopPropagation in the callback function  var g ParentDiv   function OnMouseOut event         event stopPropagation       don t let the event recurse into children         handle mouse event here       window onload   function         g ParentDiv   document getElementById  parentdiv        g ParentDiv addEventListener  mouseout   OnMouseOut  true      pass true to enable event capturing so parent gets event callback before children      lt div id  parentdiv  gt       lt img src  childimage jpg  id  childimg    gt   lt  div gt

User · Answer

instead of onmouseout use onmouseleave   You haven t showed to us your specific code so I cannot show you on your specific example how to do it   But it is very simple  just replace onmouseout with onmouseleave   That s all    So  simple     If not sure how to do it  see explanation on    https   www w3schools com jsref tryit asp filename tryjsref onmousemove leave out  Peace of cake    Enjoy it

User · Answer

Try mouseleave     Example     lt div id  parent  mouseleave  function  gt      lt div id  child  gt       lt  div gt   lt  div gt

User · Answer

I think Quirksmode has all the answers you need  different browsers bubbling behaviour and the mouseenter mouseleave events   but I think the most common conclusion to that event bubbling mess is the use of a framework like JQuery or Mootools  which has the mouseenter and mouseleave events  which are exactly what you intuited would happen    Have a look at how they do it  if you want  do it yourself or you can create your custom  lean mean  version of Mootools with just the event part  and its dependencies

User · Answer

simply we can check e relatedTarget has child class and if true return the function      if    e relatedTarget  hasClass  quot ctrl-btn quot             return         this is code worked for me  i used for html5 video play pause button toggle hover video element element on  quot mouseover mouseout quot   function e         if e type      quot mouseout quot             if    e relatedTarget  hasClass  quot child-class quot                 return

[javascript] Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery

Examples related to javascript

Examples related to css

Examples related to dom-events

Examples related to onmouseout