Question

当您将鼠标放在菜单上，在Chrome和IE中正常工作但在Firefox上无法正常工作时，会出现一个子菜单。

这里是调用子菜单的函数。

<div id="nav1">
    <table>
        <tr>
            <td style="width: 400px;" class="navItem" 
                onmouseover="showSubMenu(this, 'subMenu1');">
            </td>

        </tr>
    </table>
</div>

<div id="subMenu1" class="nav1SubMenu" onmouseover="cancelBubble();">
       {code to show the  list of options }
</div>

这是显示和隐藏子菜单的功能

 function showSubMenu(pCell, pSubMenu){
    var subMenu = document.getElementById(pSubMenu);
    var unionCell = document.getElementById("unionCell");
    var offsetElem = pCell;
    var offsetTop = null;
    var offsetLeft = null;

    while (offsetElem.parentNode){

        if (offsetElem.tagName != "DIV"){
            offsetTop += offsetElem.offsetTop;
            offsetLeft += offsetElem.offsetLeft;
        }

        offsetElem = offsetElem.parentNode;
    }

    pCell.className = "hover"

    subMenu.style.left = (offsetLeft) + "px";
    subMenu.style.top = (offsetTop + pCell.offsetHeight - 1) + "px";

    subMenu.style.display = "block";

    activeMenu = pCell;
    activeSubMenu = subMenu;

    cancelBubble();
    document.getElementById("document").onmouseover = hideSubMenu;
}

function hideSubMenu(){

    var subMenu = activeSubMenu;

    subMenu.style.display = "none";
    activeMenu.className = "navItem";

    cancelBubble();
    document.getElementById("document").onmouseover = hideSubMenu;
}

function cancelBubble(){
    if (window.event){
        window.event.cancelBubble=true;
    }

子菜单在IE和Chrome中正确显示并隐藏，但未在Firefox中显示

这是完整的HTML

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<div id="document">
<div id="head" class="headerBackground_Local">
<div id="nav1">
<table>
<tbody>
<tr>
<td class="navItem" style="width: 200px;">
<td style="width: 100px;"></td>
<td class="navItem" onmouseover="showSubMenu(this, 'subMenu1');" style="width: 400px;">
<td style="width: 10px;"></td>
<td class="navItem" style="width: 50px;"></td>
<td style="width: 100px;"></td>
<td class="navItem" style="width: 100px;"></td>
<td style="width: 135px;"></td>
</tr>
</tbody>
</table>
</div>
<div id="subMenu1" class="nav1SubMenu" onmouseover="cancelBubble();" style="left: 274px; top: 129px; display: none;">
<table cellspacing="0" cellpadding="0" border="0">
</div>
<div id="fade" class="overlay"></div>
<div id="dialogWin" class="floatWin">
</body>
</html>

Answer 1

子菜单已在Firefox中正常显示。问题是 hideSubmenu 函数也在之后被调用。在隐藏之前检查谁在触发事件是个好主意。

类似的东西：

function hideSubMenu(e){
    if (e.target instanceof HTMLTableCellElement) return;
    var subMenu = activeSubMenu;

    subMenu.style.display = "none";
    activeMenu.className = "navItem";

    cancelBubble();
    document.getElementById("document").onmouseover = hideSubMenu;
}

OnMouseOver SubMenu没有在Firefox中显示

1 个答案: