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

我目前正在将我的网站菜单从纯JavaScript切换到jQuery。我的菜单具有卷展/罗林效果。onmouseout在元素内部触发它设置为

菜单有一个外部包装，它有一个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的第一步，因此更有可能。

每一个帮助，您可以提供高度赞赏:)

[更新]

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

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

并且解决了这个问题。

来源

2013-12-19 Dennis

我看不出有任何捣鼓问题，对我来说（铬） – igor

其做工精细队友正常工作....检查您的浏览器中的任何“插件”或“插件”，这可能会阻碍某些东西！ – NoobEditor

我刚刚在linux（Debian Wheezy）上用Chrome和Firefox检查过它，并且在Windows 7上使用Chrome，Firefox，Opera和IE。Chrome和Firefox的行为与在两个操作系统上描述的相似：从灰色区域移动到黑暗灰色区域在菜单中滚动并立即再次出现。 Opera和IE根本不开始推出。但是在实际的网站（在本地），它们完全一样。 – Dennis

如果我明白你的问题的权利。

这可能有助于

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

来源

2013-12-19 14:09:29

感谢您的输入，但如果我使用此选项，则当您将鼠标悬停在外包装上方某处时，菜单将无法打开。离开外包装时菜单也应关闭。如果将外部包装留在居中的内部包装的左侧或右侧，您的更改将不会关闭它。 – Dennis

这是一个肮脏的黑客攻击，但您的问题似乎是应用过于频繁的mouseout函数，以及您真正想要捕获鼠标离开菜单/内容底部的功能。

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

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

here's the associated jsFiddle

来源

2013-12-19 17:38:22 Mike

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

回答

相关问题