javascript onmouseout 应用于儿童触发的 div答案

【问题标题】：javascript onmouseout applied to div fired by childrenjavascript onmouseout 应用于儿童触发的 div
【发布时间】：2009-08-15 03:30:35
【问题描述】：

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

谢谢

【问题讨论】：

感谢所有快速回复，接受的答案最终成为最佳解决方案。

标签： javascript jquery html events

【解决方案1】：

您正在寻找的是 mouseenter 和 mouseleave。

可以在此链接中找到一个很好的示例（他们比较了 mouseenter 和 mouseover）

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

一篇博文

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

【讨论】：

嗯我不知道这些事件
注意：这些不是标准的 W3C 事件。它们仅在 IE 中原生实现... jQuery 通过绑定常规 mouseover/out 事件并仅在目标是预期目标时触发一次来使它们工作。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

众所周知，“事件冒泡”是问题 - “元素2上的事件优先。这称为事件冒泡”。 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>

似乎在不需要 JQUERY 的情况下在最新的 Firefox 中工作 - 但是 Chrome、IE 和 Safari 似乎都需要 jquery 库才能工作。是不是说mozila现在全面支持mouseenter和mouseleave的使用了？！？！如果是这样..耶！对于实际帮助开发人员的浏览器:)

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

不，这不是设计使然，您不小心将“onmouseout”应用于太多 div。您只想将其应用于一个。

【讨论】：

我只将它应用于一个 div，如果您考虑冒泡事件模型，我会确定它是一种设计行为。查看@Vineet Reynolds 对这个问题的回答中的怪癖模式链接。
对不起，你错了。您已将其应用于超过 1 个 div。
对不起西蒙，但我认为你需要阅读它。我引用它“......并且都有一个 onClick 事件处理程序......”所以他说两个元素都有指定的事件。这就是我要告诉你的。您已将其应用于多个 div，因此会触发所有事件。当然，您可以取消一般活动（正如其他人所说），但我的评论仍然是正确的。
对不起，正确的站点错误的文章。试试这个quirksmode.org/js/events_mouse.html
西蒙，我不会再回复了。但请理解你错了；甚至那篇文章也证实了这一点。当我在另一个内部测试两个 div 时，外部具有“onmouseout”，该事件仅触发一次；当我期望的时候。这些网站上的文章是正确的，也许我们只是有一个普遍的误解。无论如何，这不值得进一步讨论。