Trouble with Multiple Events on a Single Element

Hello everyone! You guys have some great forums! :thumbsup:

I've really come to my wit's end here. I have put my code on my site (http://dyersweb.com/projects/iehelp.html). The JavaScript file is here (http://dyersweb.com/projects/iehelp.js).

My intent was to create a script that would sufficiently mimic the CSS ability to: 1) use the :hover pseudo-class on elements other than links, and 2) implement the :focus pseudo-class functionality. As most are aware, Internet Explorer needs JavaScript to utilize these behaviors which should be available in CSS2.1. I wanted to separate the behavior from the markup as much as possible, so I went with using the traditional event registration model (http://www.quirksmode.org/index.html?/js/dom0.html).

My main problem arises when utilizing both element.onmouseover/onmouseout and element.onfocus/onblur on events. The first link to my example shows the form and submit button. When either element has focus, it should take precedence, however, I was unable to ensure that the onmouseout event would not override the effects of onfocus. So, if the text turns red when the box has focus, I need it to stay red even if the user removes their mouse from the box. I have tried setting the onmouseout event to null within the onfocus function, but to no avail.

I have tried various searches with Google, but have been unable to come up with keywords that specify my situation concisely enough. I apologize if I have overlooked such a common problem within these forums, but it didn't seem to be addressed within the handy JavaScript FAQ, so I guess it's not an every-day type of thing.

I apologize for my long-windedness, and thank you all for your time,
Curtis

try cancelBubble / stopPropagation methods
see:
http://www.quirksmode.org/js/introevents.html
and go next - see the page bottom -

Are you checking the focus state of the element when you are performing the onmouseout event? If focus, then do not remove the state. Seems simple.

Eric

Thanks for your replies guys. Sorry it took me a while to get back. We had an emergency at my other forums.

To begin, I was researching both the stopPropagation method and the cancelBubble property, according to Kor's reply. I tried to implement this strategy during each of my events, but it unfortunately did not work.
// pretend we're looping through element node objects, whee!
n = elementArray[i];

// ...

// Tried in onmouseout, onfocus, and onblur as well
n.onmouseover = function(e) { // anonymous function
// I realize this can be shortened
if ( window.event ) {
e = window.event;
e.cancelBubble = true;
} else if ( e.stopPropagation ) {
e.stopPropagation();
}
this.className = hoverClass;
}
I also tried using A1ien51's advice as well, but I was unable to stop onmouseout. Basically, what I did, by interpreting your post:
// Assume we're in the loop again
n.onmouseout = function() {
if ( this.focus ) return this.className;
// else continue to remove hoverClass
}
Also, I made sure that if the className property had contents, the respective onblur and onmouseout events would only remove their own classes. I used substring to piece together the space delimited classes without each respective class. So, in onmouseout, it would remove the hoverClass class, while preserving anything else. I tested my string manipulation before hand, and it was working, so I don't know what to say.

Again, thanks very much for your help. At the very least, I have a better understanding of events now. ;)