子で発生するmouseoverおよびmouseoutイベント

Question

コード：

<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_Down divが下にスライドし、マウスアウトすると上にスライドします。

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

それを修正する方法を知っている人はいますか？

Answer 1

mouseenter および mouseleave イベントの代わりに new inプロトタイプ1.6.1 （ただし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 とは異なり、これらのイベントは子要素からバブルしません。それらはあなたがバインドした正確な要素で起動され、問題をうまく解決します。

Answer 2

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

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