Jquery 嵌套div的Mousenter/mouseleave会导致Ffox错误行为

可能重复：

因为我们希望，当鼠标以粉色innerDiv从下方进入，而没有进入绿色outerDiv而离开时，不会触发绿色outerDiv的mouseenter事件

Chrome和Opera会出现预期的行为，但Ffox不会

下面是每个浏览器的JSFIDLE代码的控制台输出

Chrome/Opera输出（正确）：

Ffox输出：

pink innerDiv mouseenter

pink innerDiv mouseleave

left pink innerDiv but through green outerDiv

green outerDiv mouseenter

知道为什么Ffox会出现错误，以及如何对其进行编码以使Ffox正确吗

JSIDLE代码：

HTML:

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

---

​

根据HTML元素结构，粉色div实际上覆盖了绿色div的底部。因此，当鼠标从底部进入粉色div时，您不能假装它没有进入绿色div。它确实进入了

从DOM的角度来看，您不能仅仅假设绿色div的大小与肉眼可见的大小一样大，它还覆盖了粉红色div覆盖的区域

---

在堆叠元素的情况下，HTML规范将事件处理程序分为两个阶段：事件捕获和冒泡。首先触发哪个元素的处理程序的顺序取决于事件注册的阶段。我建议您重新组织HTML元素，使它们不会重叠，和/或花一些时间学习javascript事件冒泡：

行为符合预期。。。将需要重新考虑您的代码。也没有

：hover

selector这是对这篇文章的重新表述，这篇文章最初措词不当。@charlietfl即使我看过，你是对的：没有

。is（“：hover”）

selector。但是，为什么Chrome&Opera能够正确地解释它而Ffox却不能呢。解决问题的其他结构思路？@undefined我想重新打开这个问题，以便回答它。另外，将嵌套标记为重复会更有用。gerrytan在嵌套问题上是正确的。将

.outerDiv{outline:4px纯红}.innerDiv{outline:4px点蓝}

添加到您的小提琴中，您将看到它。如果不输入绿色（或退出），就不能输入粉红色。我了解DOM透视图以及事件传播的工作原理。问题是Chrome和Opera不认为鼠标指针在绿色OutDeV中做鼠标器，当我离开粉红色的内内迪夫时。那么Ffox比Chrome和Opera更正确吗？

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

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

$('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;
});