javascript – 在儿童上触发的mouseover和mouseout事件

前端之家收集整理的这篇文章主要介绍了javascript – 在儿童上触发的mouseover和mouseout事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
代码
<div id="Navigation" 
    onmouSEOver="new Effect.toggle('Drop_Down','slide',{duration: 0.8});" 
    onmouSEOut="new Effect.toggle('Drop_Down',{duration: 0.8});">
    <div id="Drop_Down">
        <% include Navigation %>
    </div>
</div>

如果我将鼠标悬停在导航上,Drop_Down div会向下滑动,如果我将其鼠标移开,则会向上滑动.

问题是,如果我将鼠标悬停在Drop_Down div上,它也会向上滑动.

有谁知道我怎么能解决这个问题?

解决方法

使用 mouseentermouseleave事件而不是 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',{duration: 0.8})
        })
        .observe('mouseleave',{duration: 0.8})
        })
})
</script>

与mouSEOver和mouSEOut不同,这些事件不会从子元素冒泡.他们被绑定到你绑定的确切元素,很好地解决了你的问题.

原文链接:https://www.f2er.com/js/153533.html

猜你在找的JavaScript相关文章