代码之家 › 专栏 › 技术社区 › Simon Fox

javascript onmouseout应用于由孩子激发的div

events html jquery javascript

Simon Fox · 技术社区 · 15 年前

我很难通过谷歌找到解决方案,但我认为这是一个相当普遍的问题。我有一个应用了onmouseout事件处理程序的div(该处理程序用于使用jquerys“slideup”函数向上滚动菜单,因为我希望在鼠标离开时隐藏菜单)。问题是该div的子元素也会导致处理程序启动(我承认这是由于冒泡事件模型的性质而设计的)。现在我想知道的是,忽略这些由divs子项触发的事件的最佳方式是什么,并且只有当鼠标离开事件应用到的div时才向上滚动菜单。

谢谢

5 回复 | 直到 15 年前

Bill the Lizard 12 年前

你要找的是mouseenter和mouseleave。

http://docs.jquery.com/Events/mouseover

博客

http://blogs.oracle.com/greimer/entry/mouse_over_out_versus_mouse

Vineet Reynolds 15 年前

您可能希望尝试取消事件冒泡或传播。 Quirksmode.org 有一个方便的部分解释如何在两个模型中关闭冒泡或传播。

因为JQuery提供了 W3C standards 对于开发人员,您不需要设置cancelbubble属性。调用stopPropagation()方法就足够了。

user1502852 user1502852 12 年前

在父div上使用“mouseenter”和“mouseleave”——子元素不会影响“mouseleave”

document.getElementById('Main_Menu_Container_Div').addEventListener('mouseenter',function(){
// do something like your 'slideup' or what ever you want.
});

众所周知,“事件冒泡”是一个问题——“element2上的事件优先。这称为事件冒泡”。 http://www.quirksmode.org/js/events_order.html

使用示例:

<style>
.Child_Div_Button{
    float:left;
    cursor:pointer;
    height:100px;
    width:100px;
    background-color:#CCC;
    border:#000 thin solid;
    margin:2px;
    padding:2px;
}


.Child_Div_Button:hover{
    background-color:#FFF;
}
</style>
</head>
<body>

<div id="Parent_Div_Container" style="height:300px; width:300px; border:#333 thin solid; background-color:#D2FFFF;">
Parent Div
<div id="button_container"> 
        <div class="Child_Div_Button">
        Button 1 Child Div
        </div>

        <div class="Child_Div_Button">
        Button 2 Child Div
        </div>
    </div>

</div>


<script type="text/javascript">

      document.getElementById('button_container').style.display = 'none';// initiate

        document.getElementById('Parent_Div_Container').addEventListener('mouseenter',function(){
            document.getElementById('button_container').style.display = 'block';
        });
        document.getElementById('Parent_Div_Container').addEventListener('mouseleave',function(){
            document.getElementById('button_container').style.display = 'none';
        });



</script>

似乎可以在最新的Firefox中工作,而不需要JQUERY——但是Chrome、IE和Safari都需要JQUERY库才能工作。这是不是说mozila现在完全支持mouseenter和mouseleave的使用?!?!如果是的话。。耶!对于实际帮助开发人员的浏览器:)

-1

Cleiton 15 年前

Simon您可以使用jquery event.target属性检查触发事件的人。

-2

Noon Silk 15 年前