View Full Version : Trouble with Multiple Events on a Single Element

Curtis D
06-07-2006, 07:50 AM
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,

06-07-2006, 10:25 AM
try cancelBubble / stopPropagation methods
and go next - see the page bottom -

06-07-2006, 11:32 AM
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.


Curtis D
06-09-2006, 01:52 AM
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 ) {
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. ;)