超过孩子时触发 JavaScript mouseout

Posted 2023-03-04

【中文标题】超过孩子时触发 JavaScript mouseout

【英文标题】：JavaScript mouseout triggered when over children

【发布时间】：2012-01-05 15:02:15

【问题描述】：

我正在处理我网站的菜单，我需要用户过度/退出以显示/隐藏子菜单 + 动画。

我得到以下代码： http://jsfiddle.net/JyTPW/

当我mouseover "products" 然后转到子元素时，mouseout 被触发。我试图修复它，但我失败了。 我阅读了所有关于检查 reltarget 等的帖子，但我仍然无法使其工作。

非常感谢您的帮助。

编辑： 经过长时间的搜索，我找到了Cross-browser event registration，它提供了 mouseenter 和 mouseleave。 它解决了我的问题。

【问题讨论】：

@erimeturk，我刚刚将整个 jQuery 转换为常规 javascript。它为我节省了 90kb + 更快的过程。我不想使用 jQuery。 SamuelLiew，我不想使用 CSS3。

【参考方案1】：

查看 jQuery 源代码（最好是开源的）你可以看到他们是如何实现它的。

https://github.com/jquery/jquery/blob/91824bd2923b99b03fd1a9c4447b46fd7cc96615/src/event.js#L659

虽然在处理程序中使用了一些 jQuery API，但您可以清楚地看到它是如何工作的。它检查mouseover 事件对象并检查relatedTarget 是元素本身还是后代。如果是，则调用回调触发mouseleave。

【参考方案2】：

好吧，如果您考虑一下，它正在按预期进行。但不像程序员想要的那样。微软按照您的意愿行事。其他人，没有。 解决方案？使用jQuery并监听自定义mousenter/mouseleave event

【讨论】：

我不认为 jquery 是解决方案，one solution 可以用于 jquery，但同样不是解决方案。

是的，这是一种解决方案。您还可以自己完成整个处理和父检查，同时遍历 DOM 并处理浏览器之间的所有不一致。但是没有什么不同的事件可以按照他的意愿处理他的问题。

我不想使用 jQuery。我刚刚将我的整个 jQuery 转换为普通的 javascript。我需要基于 javascript 的解决方案。