MouseOut / MouseLeave - Event Triggers on Dropdown-Menu

Question

I got a problem with a mouseout event in FireFox and IE 11. I already tested the function with browserstack on many different setups but it seams the function works perfectly fine in Chrome, Safari, Opera and Edge.

The problem is that the mouseout event triggers when i open a drop-down-menü in FireFox or IE 11 and move the mouse to the first Option.

After some searching i found out that this is a known problem with FireFox but i cant get the script to work like it should be -> only trigger the mouseout event when the user leaves the window (content-part) of the browser.

My Event:

this.addEvent(document, "mouseout", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if (!from || from.nodeName == "HTML") {
        showPopup();
    }
});

Here is a fiddle: https://jsfiddle.net/b9b3xwre/

When you open it you can see that this error also occurs in the browser view of the fiddle.

Did i miss something out in this Event?

any help highly appreciateted.

Edit for the Comment of @Flyer53 regarding mouseleave:

I changed it to:

this.addEvent(document, "mouseleave", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if (!from || from.nodeName == "HTML") {
        bioEp.showPopup();
        console.log("show");
    }
});

But it doens't trigger in FireFox anymore

New Fiddle with the eventlistener mouseleave from the Answer of zer00ne: https://jsfiddle.net/wtkfr4h8/1/

Answer 1

You probably want mouseleave. mouseout fires a couple of times before you actually exit selected element if it is nested since it fires on every element it leaves. mouseleave will fire only once as it exits the selected element.

SNIPPET

var out = document.querySelector('.out');
var leave = document.querySelector('.leave');
var outUnit = 0;
var leaveUnit = 0;

out.addEventListener('mouseout', function(e) {
  ++outUnit;
  var outCount = document.getElementById('out');
  outCount.textContent = outUnit;
}, false);

leave.addEventListener('mouseleave', function(e) {
  ++leaveUnit;
  var leaveCount = document.getElementById('leave');
  leaveCount.textContent = leaveUnit;
}, false);

.test {
  background: yellow;
  border: 5px solid black;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 300px;
  width: 100vw;
}
.in,
.enter {
  background: rgba(0, 0, 0, .5);
  width: 30%;
  height: 80%;
  border: 3px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.out,
.leave {
  background: rgba(255, 0, 0, .7);
  width: 50%;
  line-height: 1.5;
  border: 1px dotted yellow;
  display: block;
  color: white;
  padding: 3px;
}
.buffer {
  background: rgba(0, 0, 255, .7);
  padding: 10px;
  height: 100px;
}
#out,
#leave {
  font-size: 20px;
  border: 3px dashed white;
  padding: 5px;
  margin: 5px;
}
p {
  padding: 3px;
}

<section class='test'>
  <div class='in'>
    <fieldset class='buffer'>
      <label class='out'>mouseout
        <br/>triggered:
        <output id='out'>0</output>
      </label>
    </fieldset>
  </div>
  <p>Move mouse through the numbered areas</p>
  <div class='enter'>
    <fieldset class='buffer'>
      <label class='leave'>mouseleave
        <br/>triggered:
        <output id='leave'>0</output>
      </label>
    </fieldset>
  </div>
</section>

Answer 2

Found a way to make sure the mouseleave / mouseout works better

jQuery(body).mouseleave(function(){}, function(e){
    if (e.target == this) {
        bioEp.showPopup();
        console.log('leave');
    } else {
        console.log('false');
    }
});

This detects if it is realy leave or if it is just a leave on a new layer of the website.

It is not working perfectly since using the selector on body is not a 100% solution to this problem. but at least it is not opening on dropdown-menus anymore.

Only problem is now that the event only triggers when you leave the website on a specific part. For example if you move your mouse to the Browser "X" but not when you move the mouse to the URL Bar like in the middle of the Screen.

Note: Whole problem is not 100% solved but the problem with the dropdown-menu is solved atleast. I Think the rest is a problem with the selector on body.

If anyone got an idea how to solve the last point with the selector, feel free to commentate.