Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2006
    Location
    USA
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Trouble with Multiple Events on a Single Element

    Hello everyone! You guys have some great forums!

    I've really come to my wit's end here. I have put my code on my site. The JavaScript file is here.

    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.

    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
    "Some people, when confronted with a problem, think, 'I know, I'll use regular expressions.' Now they have two problems."
    --Jamie Zawinski

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    try cancelBubble / stopPropagation methods
    see:
    http://www.quirksmode.org/js/introevents.html
    and go next - see the page bottom -
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #4
    New Coder
    Join Date
    Jun 2006
    Location
    USA
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    // 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:
    Code:
    // 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.
    "Some people, when confronted with a problem, think, 'I know, I'll use regular expressions.' Now they have two problems."
    --Jamie Zawinski


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •