MouseOut / MouseLeave - 下拉菜单上的事件触发器 [英] MouseOut / MouseLeave - Event Triggers on Dropdown-Menu

问题描述

我在FireFox和IE 11中遇到了一个mouseout事件。我已经在很多不同的设置上用browserstack测试了这个函数，但是在Chrome，Safari，Opera和Edge中，它的功能非常好。 b
$ b

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

经过一番搜索后，我发现这是一个FireFox的已知问题，但我不能让脚本工作，就像它应该是 - >只有触发mouseout事件用户离开浏览器的窗口（content-part）。

我的事件：

  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的应答的事件侦听鼠标离开： https://jsfiddle.net/wtkfr4h8/ 1 /

解决方案

您可能需要 mouseleave 。 mouseout 会在您选择的元素嵌套之前触发几次，因为它会在元素的每一个元素上触发。 mouseleave 只会在退出选定元素时触发一次。

SNIPPET

）; VAR outUnit = 0;变种leaveUnit = 0; out.addEventListener（ '鼠标移开'，函数（E）{++ outUnit; VAR outCount =的document.getElementById（ '出'）; outCount.textContent = outUnit;}，假）; leave.addEventListener（ '鼠标离开'，函数（E）{++ leaveUnit; VAR leaveCount =的document.getElementById（ '许可'）; leaveCount.textContent = leaveUnit;}，假）;

.test {background：yellow;边框：5px纯黑色;显示：flex; justify-content：space-around; align-items：center;身高：300px; width：100vw;}。in，.enter {background：rgba（0，0，0，.5）;宽度：30％;身高：80％边框：3px纯黑色;显示：flex; justify-content：center; align-items：center;}。out，.leave {background：rgba（255，0，0，.7）;宽度：50％;行高：1.5;边框：1px点缀黄色;显示：块;白颜色; padding：3px;}。buffer {background：rgba（0，0，255，.7）;填充：10px; height：100px;}＃out，＃leave {font-size：20px;边框：3px虚线白色;填充：5px; 5px;} p {padding：3px;}

< section class ='test'> < div class ='in'> < fieldset class ='buffer'> < label class ='out'> mouseout< br />触发：< output id ='out'> 0< / output> < /标签> < /字段集> < / DIV> < p>将鼠标移至编号区域< / p> < div class ='enter'> < fieldset class ='buffer'> < label class ='leave'> mouseleave< br>触发：< output id ='leave'> 0< / output> < /标签> < /字段集> < / section>

I got a problem with a mouseout event in FireFox and IE 11. I already tested the function with browserstack on many different setups but it seams the function works perfectly fine in Chrome, Safari, Opera and Edge.

The problem is that the mouseout event triggers when i open a drop-down-menü in FireFox or IE 11 and move the mouse to the first Option.

After some searching i found out that this is a known problem with FireFox but i cant get the script to work like it should be -> only trigger the mouseout event when the user leaves the window (content-part) of the browser.

My Event:

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

Here is a fiddle: https://jsfiddle.net/b9b3xwre/

When you open it you can see that this error also occurs in the browser view of the fiddle.

Did i miss something out in this Event?

any help highly appreciateted.

Edit for the Comment of @Flyer53 regarding mouseleave:

I changed it to:

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

But it doens't trigger in FireFox anymore

New Fiddle with the eventlistener mouseleave from the Answer of zer00ne: https://jsfiddle.net/wtkfr4h8/1/

解决方案

You probably want mouseleave. mouseout fires a couple of times before you actually exit selected element if it is nested since it fires on every element it leaves. mouseleave will fire only once as it exits the selected element.

SNIPPET

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>

这篇关于MouseOut / MouseLeave - 下拉菜单上的事件触发器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！