onmouseout在它设置的元素内部触发

我目前正在将我的网站菜单从纯JavaScript切换到jQuery。 我的菜单有滚动/滚动效果。

菜单有一个外包装器，它有一个onmouseout事件集。 如果触发，则检查relatedTarget是否是外包装器的子项。 如果不是，则应该发生滚动。

现在发生的事情是，如果鼠标从菜单的内包装器移动（这是将实际菜单居中）到菜单的外包装器，则onmouseout会触发。 似乎有一小部分不属于menuOuterWrapper。

该网站现在不在线，所以我在这里准备了一个小提琴。 如果将鼠标从手柄上方的灰色区域移动到左侧或右侧暗区，您将看到问题。 菜单将滚入然后立即再次出现。 仅当鼠标移出外包装时，即在深灰色区域（或浅灰色手柄区域）下，才会发生滚动。 要查看深灰色区域，可能必须增加结果块的宽度。 [编辑：我将内部宽度减少到600px，因此现在默认情况下应该可以看到暗侧区域。]

SO告诉我在链接到JSFiddle时我将包含代码。 我不想违反规则，但我会说实话：我对这个问题的来源毫无头绪。 我最好的想法是我在isChildOf实现中犯了一个错误，所以我会给你这个：

jQuery.fn.isChildOf = function (parentId) { if ($(this).parents("#" + parentId).length > 0) { return true; } else { return false; } }; $('#outer').on('mouseout', function(event) { if (!$(event.relatedTarget).isChildOf("outer")) { mouseIsOverMenu = false; menu_rollin(); } }); 

虽然这是一个最小的例子，但我在纯JS中的表现几乎相同，在那里它运行良好。 所以我想这是jQuery部分的内容。 由于这些是我使用jQuery的第一步，因此更有可能。

您提供的每一个帮助都非常感谢:)

[UPDATE]

我现在就开始工作了。 问题是我没有检查relatedTarget本身是否为“外部”。 因此，当鼠标离开内容div并进入外部div时，mouseout会触发，当然，外部不是自己的孩子。 所以我修改了它

 $('#outer').on('mouseout', function(event) { if (!(event.relatedTarget.id == "outer") && !$(event.relatedTarget).isChildOf("outer")) { mouseIsOverMenu = false; menu_rollin(); } }); 

并解决了这个问题。

Answer 1

如果我理解你的问题是对的。

这可能有所帮助

 $('#inner').on('mouseover', function() { mouseIsOverMenu = true; setTimeout(menu_rollout, 500); }); $('#inner').on('mouseout', function(event) { if (!$(event.relatedTarget).isChildOf("outer")) { mouseIsOverMenu = false; menu_rollin(); } }); 

我所做的是将#outer的id改为#inner。

Answer 2

这是一个肮脏的黑客，但你的问题似乎是鼠标输出function应用太频繁，你真正想要的function是捕获鼠标离开菜单/内容的底部。

这里有一些代码可以做到这一点。

 $('#outer').on('mouseout', function(event) { if(event.clientY >= document.getElementById('outer').offsetHeight){ mouseIsOverMenu = false; menu_rollin(); } }); 

这是相关的jsFiddle