MouseOut / mouselleave -事件触发下拉菜单

MouseOut / MouseLeave - Event Triggers on Dropdown-Menu

本文关键字：下拉菜单 事件 mouselleave MouseOut      更新时间：2023-09-26

我在FireFox和IE 11中遇到了鼠标离开事件的问题。我已经用browserstack在许多不同的设置上测试了这个功能，但它似乎在Chrome, Safari, Opera和Edge中工作得很好。

问题是当我在FireFox或IE 11中打开drop-down-menü并将鼠标移动到第一个选项时触发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/

当你打开它时，你可以看到这个错误也发生在提琴的浏览器视图中。

我错过了什么吗?

任何帮助都非常感谢。

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

添加事件监听器mouseleave: https://jsfiddle.net/wtkfr4h8/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>

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

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

这检测它是否真的离开，或者如果它只是一个离开网站的新层。

这是不完美的工作，因为使用选择器的身体不是一个100%的解决方案，这个问题。但至少它不再通过下拉菜单打开了。

现在唯一的问题是，事件只有在你离开网站的特定部分时才会触发。例如，如果你将鼠标移动到浏览器"X"，但当你将鼠标移动到屏幕中间的URL栏时却没有。

注意:整个问题没有100%解决，但下拉菜单的问题至少解决了。我认为剩下的是body上的选择器的问题。

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

相关文章：