1

重複の可能性:
ネストされた div の奇妙な mouseenter/mouseleave 動作

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

</p>

4

1 に答える 1

0

HTML 要素の構造に基づいて、実際にはピンクの div が緑の div の下部を覆っています。したがって、マウスが下からピンクの div に入ると、緑の div に入らなかったふりをすることはできません。やった！

DOM の観点からは、緑の div のサイズが目に見える大きさだけであると仮定することはできませんが、ピンクの div で覆われた領域もカバーしています。

要素を積み重ねる場合、HTML 仕様では、イベント ハンドラーをイベント キャプチャとバブリングの 2 つのフェーズに分割します。どの要素のハンドラーが最初に起動されるかの順序は、イベントが登録されているフェーズによって異なります。オーバーラップしないように HTML 要素を再編成するか、javascript イベント バブリングの学習に時間を費やすことをお勧めします: http://www.quirksmode.org/js/events_order.html

于 2013-01-04T03:37:23.703 に答える