attachEvent доставляет неприятности

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 функция прослушивания событий - это не копирование, а ссылка, и именно поэтому это вызывает у меня проблему. Есть ли способ обойти эту проблему?

Я даже пытался создать отдельную функцию для attachEvent for IE и непосредственно указывал путь к объекту, однако это все еще жаловалось.

Нечто подобное

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

Примечание: я планирую переписать это простое по функциональности меню в JQuery, но сейчас я заинтересован в изучении JavaScript Core + DOM и хотел бы обойти эту проблему.

Заранее спасибо.

Answer 1

Как дополнение к ответам выше, я обычно использую этот способ кодирования больше JavaScript-y:

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

Answer 2

Цель события в 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

См. здесь для более подробной информации. Отказ от ответственности: мой код не проверен.