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

【问题标题】：MouseOut / MouseLeave - Event Triggers on Dropdown-MenuMouseOut / MouseLeave - 下拉菜单上的事件触发器
【发布时间】：2016-11-04 09:25:03
【问题描述】：

我在 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/

【问题讨论】：

您是否真的尝试过mouseleave 而不是mouseout？尽管您在问题中提到了它，但您并没有说您是否在代码中尝试过...
是的，我确实尝试使用 mouseleave 而不是 mouseout。问题是该功能在我更改后根本无法在 FireFox 中运行。 mouseleave 仅适用于 Chrome、Opera、Edge 等，但不适用于 FireFox。

标签： javascript jquery firefox

【解决方案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>

【讨论】：

感谢您的回答。我试图在我的小提琴中使用离开事件的代码。这是一个更新版本：jsfiddle.net/wtkfr4h8/1 新的 addEventListener 在 JS 行 221 中。但是当您在其中选择一个选项时打开下拉菜单时会触发该事件。我在小提琴中更改它的方式可能有问题吗？非常感谢您的帮助。

【解决方案2】：

找到一种方法来确保 mouseleave / mouseout 工作得更好

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

这会检测它是真的离开还是只是网站新层的离开。

它不能完美地工作，因为在 body 上使用选择器并不是 100% 解决这个问题。但至少它不再在下拉菜单上打开。

现在唯一的问题是该事件仅在您离开网站的特定部分时触发。例如，如果您将鼠标移动到浏览器“X”，但当您将鼠标移动到 URL 栏（如屏幕中间）时却没有。

注意：整个问题并未 100% 解决，但下拉菜单的问题至少已解决。我认为其余的都是 body 上的选择器的问题。

如果有人知道如何使用选择器解决最后一点，请随时发表评论。

【讨论】：