mouseover and mouseout events firing on children

眉间皱痕 提交于 2019-12-07 03:36:01

问题


The code:

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

If I mouseover the Navigation the Drop_Down div slides down, and if I mouseout it slides up.

The problem is if I mouseover the child Drop_Down div it also slides up.

Does anyone know how I can fix that?


回答1:


Use the mouseenter and mouseleave events instead new in Prototype 1.6.1 (but not new in IE). You have to move your inline event handlers out of your markup to do this:

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

And setup the events in script:

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

Unlike mouseover and mouseout, these events do not bubble from child elements. They are fired on the exact element you bind them to, solving your issue nicely.




回答2:


As an alternate, generic (not Prototype-specific) answer

This is caused by Event Bubbling. More info, including how to cancel it in child nodes, here: http://www.quirksmode.org/js/events_order.html



来源:https://stackoverflow.com/questions/1651469/mouseover-and-mouseout-events-firing-on-children

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!