Mousenter /鼠標離開導致Ffox行爲不檢

可能重複：
Nested div weird mouseenter/mouseleave behavior Mousenter /鼠標離開導致Ffox行爲不檢

爲this JSfiddle，我們希望的是，當鼠標在粉紅色innerDiv下面進入和離開，而不進入綠色outerDiv，綠色outerDiv的mouseenter事件不會被觸發。

預期的行爲發生與Chrome和Opera，但不與Ffox。

下面遵循每個瀏覽器的jsfiddle代碼的控制檯輸出。

鉻/歌劇輸出（正確）：

pink innerDiv mouseenter 

pink innerDiv mouseleave

Ffox輸出：

pink innerDiv mouseenter 

pink innerDiv mouseleave 

left pink innerDiv but through green outerDiv 

green outerDiv mouseenter

任何想法，爲什麼Ffox行爲不端，並讓Ffox得到它的權利如何將其代碼？

的jsfiddle代碼：

HTML：

<div class="outerDiv"> 
    Outer div text 
    <div class="innerDiv"> 
     Inner div text 
    </div> 
</div>

CSS：

div.outerDiv { 
     position: relative; 
     height: 110px; 
     cursor: auto; 
     padding-top: 0; 
     background-color: #00A300 !important; 
     box-shadow: 0 0 1px #FFFFCC inset; 
     color: #FFFFFF; 
     display: block; 
     float: left; 
     font-family: 'Segoe UI Semilight','Open Sans',Verdana,Arial,Helvetica,sans-serif; 
     font-size: 11pt; 
     font-weight: 300; 
     letter-spacing: 0.02em; 
     line-height: 20px; 
     margin: 0 10px 10px 0; 
     overflow: hidden; 
     text-decoration: none; 
     width: 150px; 
    } 

    div.innerDiv{ position:absolute; 
     width: 100%; 
     bottom: 0; 
    background-color: magenta; 
    }

的Javascript：

$('div.outerDiv').on('mouseenter', function(){ console.log('green outerDiv mouseenter'); }); 

$('div.outerDiv').on('mouseleave', function(){ console.log('green outerDiv mouseeleave');  }); 


$('div.innerDiv').on('mouseenter', function(){ console.log('pink innerDiv mouseenter');  return false; }); 

$('div.innerDiv').on('mouseleave', function(){ 
    console.log('pink innerDiv mouseleave'); 
    if($('div.outerDiv').is(':hover')){ 
     console.log('left pink innerDiv but through green outerDiv'); 
     $('div.outerDiv').trigger('mouseenter'); 
    } 
    return false; 
});

來源

2013-01-04 Thalis K.

行爲......將需要重新考慮你的代碼。還沒有'：hover'選擇 – charlietfl

這是後[「嵌套DIV怪異的mouseenter /鼠標離開的行爲」（http://stackoverflow.com/questions/14148820/nested-div-weird-mouseenter-mouseleave的改述 - 行爲），這本來是很糟糕的措詞。 –

@charlietfl即使我已經看到它，你是對的：沒有'.is（'：hover'）'選擇器。但是，爲什麼Chrome＆Opera會正確解釋它，而Ffox卻沒有。替代結構的想法來克服這個問題？ –

根據您的HTML元素結構，pink div實際上覆蓋了綠色div的底部。因此，當鼠標從底部輸入粉紅色的div時，你不能假裝它沒有進入綠色div。它做了！

從DOM的角度來看，你不能想當然地認爲綠色DIV大小隻有大如什麼是你的眼睛可見的，但它也涵蓋了粉紅色的div覆蓋的區域。

在堆疊元件的情況下，HTML規範將所述事件處理程序分爲兩個階段：事件捕捉和冒泡。哪個元素的處理程序首先被觸發的順序取決於事件註冊的階段。我建議要麼你重新組織你的HTML元素，以便它們不重疊，和/或花一些時間來學習JavaScript事件冒泡：如預期http://www.quirksmode.org/js/events_order.html

來源

2013-01-04 03:37:23 gerrytan

gerrytan對嵌套問題是正確的。添加'。outerDiv {outline：4px solid red} .innerDiv {outline：4px dotted blue}'你的小提琴，你會看到它。如果不輸入綠色（或退出），則無法輸入粉紅色。 – Dawson

我瞭解DOM透視以及事件傳播如何工作。問題在於，當我離開粉紅色的innerDiv時，Chrome和Opera不考慮鼠標指針在綠色外部區域中執行mouseenter。那麼Ffox比Chrome和Opera更正確嗎？ –

Mousenter /鼠標離開導致Ffox行爲不檢

回答

相關問題