使用javascript更改backgroundColor

Question

This script works fine in all other browsers except 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);

In IE, the backgroundcolor does not change on hover.

Any ideas?

Answer 1

In IE you have to use attachEvent rather than the standard addEventListener . And use srcElement instead of target for IE.

Try this.

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 uses the 'on' versions for events, line onclick , onmouseover . There should be your problem.

Also, IE (prior to version 9), does not support addEventListener . You must use attachEvent .

Consider this code as a starting point:

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