javascript - MouseOutMouseLeave - Event Triggers on Dropdown-Menu - Stack Overflow

admin管理员组

文章数量:1287647

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: /

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: /

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/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/wtkfr4h8/1/

• javascript
• jquery
• firefox

Share Improve this question Follow edited Nov 4, 2016 at 10:51 Ferdinand Fatal asked Nov 4, 2016 at 9:25 Ferdinand FatalFerdinand Fatal 38433 silver badges1818 bronze badges 2

• Did you actually try mouseleave instead of mouseout? Although you mention it in the question you don't say whether you tried it in the code... – Flyer53 Commented Nov 4, 2016 at 10:19
• Yes I did try to use mouseleave instead of mouseout. The problem was that the function didn't work in FireFox at all after i changed it. mouseleave only worked in Chrome, Opera, Edge and so on but not in FireFox. – Ferdinand Fatal Commented Nov 4, 2016 at 10:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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>

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 mentate.

本文标签： javascriptMouseOutMouseLeaveEvent Triggers on DropdownMenuStack Overflow