Question

我无法通过谷歌找到解决方案，但我认为这将是一个非常常见的问题。我有一个div我已经应用了onmouseout事件处理程序（处理程序用于使用jquerys“slideup”函数滚动菜单，因为我希望鼠标离开时隐藏菜单）。问题是该div的子元素也会导致处理程序触发（我接受这是由于冒泡事件模型的性质而设计的）。现在我想知道的是忽略由divs子项触发的这些事件的最佳方法是什么，只有当鼠标离开应用事件的div时才滚动菜单。

由于

Answer 1

您正在寻找的是mouseenter和mouseleave。

在这个链接上可以找到一个很好的例子（他们已经比较了mouseenter和mouseover）

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

博客条目

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

Answer 2

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

由于JQuery向开发人员提供W3C standards，因此您无需设置cancelbubble属性。调用stopPropagation（）方法就足够了。

Answer 3

在父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？！？！如果是这样..是的！对于实际上可以帮助开发人员的浏览器：）

Answer 4

Simon您可以使用jquery Event.target属性检查谁触发了事件。

Answer 5

不，这不是设计，你不小心将你的'onmouseout'应用于太多的div。您只想将其应用于一个。

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

5 个答案: