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

这是一个小提琴：https : //jsfiddle.net/b9b3xwre/

当你打开它时，你可以看到这个错误也出现在 fiddle 的浏览器视图中。

我在这次活动中错过了什么吗？

任何帮助高度赞赏。

编辑@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 中触发

来自 zer00ne 答案的事件监听器 mouseleave 的新小提琴：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>