javascript - MouseOut/MouseLeave - 下拉菜单上的事件触发器

Question

我在 FireFox 和 IE 11 中遇到了 mouseout 事件的问题。我已经在许多不同的设置上使用 browserstack 测试了该功能，但它表明该功能在 Chrome、Safari、Opera 和 Edge 中运行得非常好。

问题是，当我在 FireFox 或 IE 11 中打开下拉菜单并将鼠标移动到第一个选项时，会触发 mouseout 事件。

经过一番搜索后，我发现这是 FireFox 的一个已知问题，但我无法让脚本正常工作 -> 仅在用户离开浏览器窗口(内容部分)时触发 mouseout 事件.

我的事件:

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

这是一个 fiddle :https://jsfiddle.net/b9b3xwre/

打开可以看到fiddle的浏览器 View 也出现了这个错误。

我在这次事件中错过了什么吗？

非常感谢任何帮助。

编辑 @Flyer53 关于 mouseleave 的评论:

我把它改成:

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");
    }
});

但它不再在 FireFox 中触发

新的 Fiddle with the eventlistener mouseleave 来自 zer00ne 的答案:https://jsfiddle.net/wtkfr4h8/1/

Answer 1

您可能需要 mouseleave。 mouseout 在您实际退出所选元素之前触发几次(如果它是嵌套的)因为它会在它离开的每个 元素上触发。 mouseleave 只会在退出所选元素时触发一次。

片段

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>