JavaScript中的onmouseout应用于div，由子元素触发。

Question

JavaScript中的onmouseout应用于div，由子元素触发。

6

我在谷歌上找不到解决方案，但我认为这应该是一个很常见的问题。我有一个div，我已经给它应用了一个onmouseout事件处理程序（该处理程序用于使用jquery的“slideup”函数卷起菜单，因为我希望鼠标离开时隐藏菜单）。问题是该div的子元素也会引发处理程序（我接受这是由于冒泡事件模型的本质所致）。现在我想知道的是忽略这些由div的子元素触发的事件，并仅在鼠标离开应用事件的div时卷起菜单的最佳方法是什么。

谢谢

- Simon Fox

感谢大家的快速回复，最终采纳的答案是最佳解决方案。 - Simon Fox

5个回答

1

请在父级 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>

最新版本的Firefox似乎可以在不需要JQUERY的情况下工作 - 但是Chrome、IE和Safari都需要jquery库才能使其正常工作。这是否意味着Mozilla现在完全支持使用mouseenter和mouseleave事件了？如果是这样的话，那么太好了！这是一个真正为开发人员提供帮助的浏览器 :)

- user1502852

1

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

由于JQuery向开发者展现了W3C标准，所以您不需要设置cancelbubble属性。调用stopPropagation()方法就足够了。

- Vineet Reynolds

-1

Simon，你可以使用jQuery的Event.target属性来检查触发事件的人。

- Cleiton

-2

不，这不是设计上的问题，你不小心将“onmouseout”应用于太多的div上了。你只需要将它应用于一个div上即可。

- Noon Silk

1

我只将它应用于一个div上，如果你考虑冒泡事件模型，我认为这是一种设计行为。请查看@Vineet Reynolds在此问题中的解答中关于quirks模式的链接。 - Simon Fox

对不起，但是您错了。您已经将其应用于多个 div。 - Noon Silk

抱歉，Simon，但我认为你需要阅读它。我从中引用：“...并且两者都有一个onClick事件处理程序...”所以他是说两个元素都指定了事件。这就是我告诉你的。你已经将其应用于多个div，因此所有事件都会触发。当然，你可以取消通用事件（正如其他人所说），但我的评论仍然是正确的。 - Noon Silk

1

抱歉，您所在的网站是错误的文章。请尝试访问此链接：http://www.quirksmode.org/js/events_mouse.html - Simon Fox

Simon，我不会再回复你了。但请你理解，你是错的；即使那篇文章也证实了这点。当我测试一个嵌套有内部和外部两个div元素时，当外部div使用'onmouseout'事件时，事件只会触发一次，而我原本期望它能够多次触发。那些网站上的文章都是正确的，也许我们只是存在着一些基本的误解。无论如何，这已经不值得继续讨论了。 - Noon Silk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alec Smart · Accepted Answer

您需要的是mouseenter和mouseleave事件。您可以在此链接中找到一个很好的例子（它们已经比较了mouseenter和mouseover）： http://docs.jquery.com/Events/mouseover 这篇博客文章也提供了相关信息： http://blogs.oracle.com/greimer/entry/mouse_over_out_versus_mouse