Question

我正在尝试在javascript中下拉水平菜单。它在Firefox和Chrome上运行良好，但在IE中给我带来了麻烦。

这是我的代码

function init(){

    hideAllSubMenu();

    var menuItem = document.getElementById("menu_wrap").getElementsByTagName("div");

    for(var index = 0; index < menuItem.length; index++)
    {
        // if firefox and all oother browsers
        if(typeof menuItem[index].addEventListener != "undefined")  
        {
            menuItem[index].addEventListener("mouseover", ShowListener, false);
            menuItem[index].addEventListener("click", ShowListener, false);
        }
        else //IE
        {
            menuItem[index].attachEvent("onclick", ShowListener);
            menuItem[index].attachEvent("onmouseover", ShowListener);
        }       
    }
}


function ShowListener(event)
{
    hideAllSubMenu();

    var menuItemIdStr = this.id;
    var menuItemIdNum = menuItemIdStr.replace(/menu/i, "");
    var subMenu = document.getElementById("submenu_wrap" + menuItemIdNum);

    subMenu.style.left = this.offsetLeft + "px";
    subMenu.style.top = this.offsetTop + this.offsetHeight + 2 + "px";
    subMenu.style.display = "block";
}

这似乎是抱怨这个。我明白在IE中事件监听器功能不是复制而是引用，这就是为什么这个给我一个问题。有没有解决这个问题的方法？

我甚至试图为IE的attachEvent创建单独的函数，并直接在那里创建路径，但它仍然抱怨。

像这样的东西

menuItem[index].attachEvent("onmouseover", ShowListenerIE(menuItem[index]));

注意：我打算在功能上将这个简单的菜单重写为JQuery，但是现在我有兴趣学习JavaScript Core + DOM，并想找到解决这个问题的方法。

提前致谢。

Answer 1

IE中的事件目标位于event.srcElement，您可以在event.target的其他浏览器中获取类似信息。另请注意，IE不会将事件作为参数传递给处理程序 - 而是在window.event中。所以，一个完整的解决方案：

if (!event)
{
    event = window.event; //IE
}

var target;
if (event.target)
{
    target = event.target;
}
else if (event.srcElement)
{
    target = event.srcElement;
}

//From here on is your code, use target instead of this

有关更多详细信息，请参阅here。免责声明：我的代码未经测试。

Answer 2

作为上述答案的补充，我通常使用这种编码更多JavaScript-y的方式：

function eventHandler( event ){
    var event  = window.event || event;
    var target = event.srcElement || event.target;
}

attachEvent给你带来麻烦

2 个答案: