изменение backgroundColor с помощью JavaScript

Question

Этот скрипт отлично работает во всех других браузерах, кроме IE:

nav.addEventListener('mouseover',function(e) {
        switch(e.target.id) {
            case 'aGallery':
            navOpacity.style.backgroundColor = "red";
            break;
            case 'aContact':
            navOpacity.style.backgroundColor = "green";
            break;
            case 'aAbout':
            navOpacity.style.backgroundColor = "yellow";
            break;
            case 'aHome':
            navOpacity.style.backgroundColor = "#CC33CC";
            break;
        }
    },false);

В IE, цвет фона не меняется при наведении.

Есть идеи?

Answer 1

В IE вы должны использовать attachEvent вместо стандартного addEventListener.И используйте srcElement вместо target для IE.

Попробуйте это.

function mouseOverHandler(e) {
        switch((e.target || e.srcElement).id) {
            case 'aGallery':
            navOpacity.style.backgroundColor = "red";
            break;
            case 'aContact':
            navOpacity.style.backgroundColor = "green";
            break;
            case 'aAbout':
            navOpacity.style.backgroundColor = "yellow";
            break;
            case 'aHome':
            navOpacity.style.backgroundColor = "#CC33CC";
            break;
        }
}

if (el.addEventListener){
  el.addEventListener('mouseover', mouseOverHandler, false); 
} 
else if (el.attachEvent){
  el.attachEvent('onmouseover', mouseOverHandler);
}

Answer 2

IE использует версии 'on' для событий, строка onclick, onmouseover. Там должна быть ваша проблема.

Кроме того, IE (до версии 9) не поддерживает addEventListener. Вы должны использовать attachEvent.

Считайте этот код отправной точкой:

if (el.addEventListener){
  el.addEventListener('click', myFunc);
} else if (el.attachEvent){
  el.attachEvent('onclick', myFunc);
}