Question

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

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

经过一番搜索，我发现这是FireFox的一个已知问题，但我不能让脚本像它应该的那样工作 - ＆gt;只有当用户离开浏览器的窗口（内容部分）时才会触发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中触发

来自zer00ne答案的eventlistener mouseleave的新小提琴：https://jsfiddle.net/wtkfr4h8/1/

Answer 1

你可能想要mouseleave。 mouseout在实际退出所选元素之前会触发几次，因为它会挂起每个元素。 mouseleave只会在退出所选元素时触发一次。

段

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

找到一种方法来确保mouseleave / mouseout更好地运行

(match-end 1)

这会检测它是否真的离开，或者它是否只是在网站的新图层上留下。

由于在身体上使用选择器不是100％解决此问题的方法，因此效果不佳。但至少它不再在下拉菜单上打开了。

现在唯一的问题是，当您将网站留在特定部分时，该事件才会触发。例如，如果您将鼠标移动到浏览器＆＃34; X＆＃34;但是当你将鼠标移动到屏幕中间的URL栏时不会。

注意：整个问题并非100％解决，但下拉菜单的问题至少得到解决。我认为剩下的就是身体选择器的问题。

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

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

2 个答案:

段