di chuột vào và sự kiện bắn đối với trẻ em

Question

Mã:

<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> 

Nếu tôi di chuột lên các Navigation các Drop_Down div trượt xuống, và nếu tôi mouseout nó trượt lên.

Vấn đề là nếu tôi di chuyển con Drop_Down div nó cũng sẽ trượt lên.

Có ai biết cách tôi có thể khắc phục điều đó không?

Answer 1

Sử dụng các sự kiện mouseenter và mouseleave thay vì new in Prototype 1.6.1 (nhưng không phải mới trong IE). Bạn phải di chuyển xử lý sự kiện inline của bạn ra khỏi đánh dấu của bạn để làm điều này:

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

Và thiết lập các sự kiện trong kịch bản:

<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> 

Không giống như mouseover và mouseout, những sự kiện không bong bóng từ yếu tố con . Chúng được kích hoạt trên phần tử chính xác mà bạn liên kết với chúng, giải quyết vấn đề của bạn một cách độc đáo.

Answer 2

Là câu trả lời thay thế, chung chung (không phải Nguyên mẫu)

Điều này là do sự kiện Bubbling. Thông tin khác, bao gồm cách hủy thông tin trong các nút con, tại đây: http://www.quirksmode.org/js/events_order.html