MouseOut / MouseLeave-下拉菜單上的事件觸發器

Question

我在FireFox和IE 11中遇到了mouseout事件的問題。我已經在許多不同的設置上使用瀏覽器堆棧測試了該功能，但它表明該功能在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/

當您打開它時，您可以在小提琴的瀏覽器視圖中看到該錯誤。

我在這次活動中錯過了什么嗎？

非常感謝任何幫助。

編輯有關mouseleave的@ Flyer53的評論：

我將其更改為：

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的答案中帶有事件偵聽器mousele的新提琴： https ://jsfiddle.net/wtkfr4h8/1/

Answer 1

您可能需要mouseleave 。 如果嵌套， mouseout觸發兩次，直到您實際退出所選元素（因為它嵌套在每個離開的元素上）。 mouseleave在退出選定元素時將僅觸發一次。

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> 

Answer 2

找到一種方法來確保mouseleave / mouseout更好地工作

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

這將檢測是真正休假還是只是在網站的新層上休假。

由於無法在主體上使用選擇器，因此不能完全解決此問題，因此無法正常工作。 但至少在下拉菜單中它不再打開。

現在唯一的問題是，該事件僅在您離開網站的特定部分時才觸發。 例如，如果將鼠標移至瀏覽器“ X”，而不是將鼠標移至“ URL”欄（如屏幕中間），則不會。

注意：不能完全解決整個問題，但下拉菜單的問題至少可以解決。 我認為剩下的就是身體上的選擇器了。

如果有人知道如何使用選擇器解決最后一點，請隨時發表評論。