Question

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

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

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

该网站现在不在线，所以我准备了一个小提琴here。如果将鼠标从手柄上方的灰色区域移动到左侧或右侧暗区，您将看到问题。菜单将滚入，然后立即再次出现。只有当鼠标移出外包装时，即在深灰色区域（或浅灰色手柄区域）下，才会发生滚动。要查看深灰色区域，可能必须增加结果块的宽度。 [编辑：我将内部宽度减少到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

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

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

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

here's the associated jsFiddle

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

2 个答案: