6

コード：

<div id="Navigation" 
    onmouseover="new Effect.toggle('Drop_Down','slide',{duration: 0.8});" 
    onmouseout="new Effect.toggle('Drop_Down','slide',{duration: 0.8});">
    <div id="Drop_Down">
        <% include Navigation %>
    </div>
</div>

マウスオーバーするNavigationとDrop_Downdivが下にスライドし、マウスアウトすると上にスライドします。

問題は、子divの上にマウスを置くと、Drop_Downそれも上にスライドすることです。

誰かが私がそれを修正する方法を知っていますか？

4

2 に答える 2

11

代わりに、Prototype 1.6.1 で新しく導入されmouseenterたandmouseleaveイベントを使用します(ただし、IE では新しくありません)。これを行うには、インライン イベント ハンドラーをマークアップから移動する必要があります。

<div id="Navigation">
    <div id="Drop_Down">
        <% include Navigation %>
    </div>
</div>

スクリプトでイベントをセットアップします。

<script>
document.observe('dom:loaded', function() {
    $('Navigation')
        .observe('mouseenter', function() {
            new Effect.toggle('Drop_Down','slide',{duration: 0.8})
        })
        .observe('mouseleave', function() {
            new Effect.toggle('Drop_Down','slide',{duration: 0.8})
        })
})
</script>

mouseoverや とは異なりmouseout、これらのイベントは子要素からバブリングしません。それらはバインド先の正確な要素で起動され、問題をうまく解決します。

于 2009-10-30T18:35:12.247 に答える
2

代替の一般的な（プロトタイプ固有ではない）回答として

これは、イベント バブリングが原因です。子ノードでキャンセルする方法を含む詳細情報: http://www.quirksmode.org/js/events_order.html

于 2009-10-31T02:08:06.433 に答える