Question

可能重复：
Nested div weird mouseenter/mouseleave behavior

对于this JSfiddle，我们希望当鼠标从粉红色的innerDiv中从下面进入并离开而不进入绿色的outerDiv时，不会触发绿色的outerDiv的mouseenter事件。

预期的行为发生在Chrome和Opera上，而不是Ffox。

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

Chrome / Opera输出（正确）：

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

Answer 1

根据您的HTML元素结构，粉色div实际上覆盖了绿色div的底部。因此，当鼠标从底部输入粉红色div时，您无法假装它没有进入绿色div。它做到了！

从DOM的角度来看，你不能只假设绿色div大小只有你眼睛看到的那么大，但它也涵盖了粉色div所覆盖的区域。

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

嵌套div的Mouseenter / mouseleave导致不当行为

1 个答案: