How to use Javascript onmouseout on a DIV when it has child DIVs

Question

I am developing a website for learning purposes. I have created a menu button at top right as seen in the screenshot below. The below screenshot shows how the page looks when the menu button is triggered. You can see there are 3 divisions in the expanded menu panel. I am trying to use javascript onmouseout to hide the menu automatically when move the mouse outside the DIV. But as soon as mouse pointer reaches the middle gray div, the menu hides. Though this gray div is a child of menu panel, the menu hides itself as soon as it reaches this gray div. How to over come this problem?

Address

No. 39, LIG3, Surya City, Bangalore - 560008

+91 9X9X9X9X9X

info@theubiquity.in

Lionel Rowe · Answer

You need mouseleave instead of mouseout: mouseleave and mouseout are similar but differ in that mouseleave does not bubble and mouseout does. This means that mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element). Demo: const parent = document.querySelector('#div-soup') parent.addEventListener('mouseout', () => console.log('mouseout')) parent.addEventListener('mouseleave', () => console.log('??? mouseleave ???')) #div-soup{width:45%}div{margin:5px;padding:5px;background:rgba(0,0,0,.1)}.as-console-wrapper{width:50%;max-height:100%;position:fixed;overflow:hidden!important;padding:0;margin:0;right:0;left:50%!important;bottom:0!important;max-height:100%!important}

Rounin · Answer

You can apply the CSS declaration pointer-events: none to

. Example: .contact { pointer-events: none; } This will prevent .menupanel from being able to register a mouseout event, when the mouse-pointer moves over .contact.

Dmitry · Answer

If your element has children, then every event of that children propagates to parent's element event-handler.
Long story short, your parent div captures mouseout event of child element and then executes handler.
To prevent this you need something like this:
document
  .getElementById('my-parent-div')
  .addEventListener('mouseout', function(event) {
    if (event.target === this) {
      // do some stuff
    }
  });

How to use Javascript onmouseout on a DIV when it has child DIVs

3 Answers

Add your own answers!

Ask a Question