鼠標懸停及移出事件對兒童

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格下滑，如果我鼠標移開它向上滑動。

問題是，如果我將鼠標懸停在兒童Drop_Down div上，它也會滑落。

有誰知道我該如何解決這個問題？

Answer 1

使用mouseenter和mouseleave事件代替new in Prototype 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