1

可能重复：
嵌套 div 奇怪的 mouseenter/mouseleave 行为

对于这个JSfiddle，我们希望当鼠标从粉红色的innerDiv下方进入并且没有进入绿色的outerDiv而离开时，不触发绿色的outerDiv的mouseenter事件。

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

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

Chrome/Opera 输出（正确）：

pink innerDiv mouseenter

pink innerDiv mouseleave

福克斯输出：

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

​</p>

4

1 回答 1

0

Based on your HTML element structure, the pink div is actually covering the bottom part of the green div. Hence when the mouse enter pink div from the bottom, you cannot pretend it did not enter the green div. It did!

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

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

于 2013-01-04T03:37:23.703 回答