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

Question

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

菜单有一个外包装，其中设置了一个 onmouseout 事件。如果触发，则检查 relatedTarget 是否是外包装的子对象。如果没有，rollin 就会发生。

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

该网站现在不在线，所以我准备了一个 Fiddle here .如果将鼠标从 handle 上方的灰色区域移动到左侧或右侧的黑色区域，您就会看到问题。菜单将滚入，然后立即再次滚出。只有当鼠标移出外包装时，即在深灰色区域(或浅灰色 handle 区域)下方，才会发生滚动。要查看深灰色区域，您可能必须增加结果 block 的宽度。 [编辑:我将 inner 的宽度减少到 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 的第一步，因此更有可能。

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

[更新]

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

$('#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。