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 15 of 15
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Event Handling with Child Nodes

    Is there any way to prevent the child nodes of and element from firing nodes of a the parent? Like if I have a div with and img inside and the div has an onmouseover and onmouseout event on it. When I mouse over the img it fires the onmouseout (obviously) and then re-fires the onmouseover event. If there any way to avoid this? Preferably some way of doing it in IE and MOZ. Hopefully someone knows.

    Thank you.
    - Maximus

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you could post a little bit of sample code, it would be helpful to see what you're talking about exactly.

    Sadiq.

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well somethign simple like this would do it:

    <div onmouseover="alert('hello')" ><img id="gah"
    src="nav_arrow.gif" width="15" height="10" border="0" alt=""></div>

    if you moused over the div, it would alert, then if you mouseover the img it also alerts again, if you go back to the div if alerts again. You get the idea. The obvious point is that when you mouseover the img in the div, if fires a mouseout then mouseover for the div. My question is: how can I avoid that intermediate firing of events?
    - Maximus

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Given your example, I wonder what this might do:
    Code:
    <div onmouseover="alert('hello')" ><img id="gah" 
    src="nav_arrow.gif" width="15" height="10" border="0" alt="" onmouseover="return;"></div>
    Like I wonder if that overrides the div's onmouseover event. Let me know if that works.

    Sadiq.

  • #5
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No good. It doesn't prevent the parent div from thinking that your exiting it's space. All it does it prevent any code affecting the img tag's onmouseover.
    - Maximus

  • #6
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm.. do you have to use a div? What if you used a table, and put the img in a td as opposed to a div? I wonder if that would work..

    Sadiq.

  • #7
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually just replacing the div with a span fixes part of it.. like onmouseover on the img doesn't call the span's onmouseout.

    So maybe that's an option.. this is IE only, I'm not sure how Moz reacts..

    Sadiq.

  • #8
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You are missing the point. Making the div a span means you are wrapping and inline element with an inline element. That means there is not "visible" area of the span for your to mouseover to this does not occur. Also, what I'm showing you is the "normal" way event handlers work. Usually you don't notice it because simple changes like background colors change in a fraction of a second, but if you have large code or code with timeouts being fired you do notice it. still the question remains, is there a way to stop child elements from making the parent elements mouseover/mouseout fire?
    - Maximus

  • #9
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Maximus - DFX
    You are missing the point. ...... still the question remains, is there a way to stop child elements from making the parent elements mouseover/mouseout fire?
    I dunno man. Sorry.

    Sadiq.

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I understand this correctly, you want a child node's event to be fired, while not triggering its parent node's event listener. The event is bubbling, so all you have to do is cancel the propagation:

    Code:
    event.cancelBubble=true;
    Hope that helps!

    Happy coding!

  • #11
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    event.stopPropagation() in DOM2-compliant browsers.

  • #12
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Its not that. If you mouse over a child node, the parent node temporarily thinks your mousing out of it and then it fires its mouseout and then realizes you are still in its region and then fires the mouseover again. I want to know of a way to prevent this. IF you use cancelEvent it only prevents the parent from re-firing it's mouseover event.

    What I want is to have an image inside a div and I want that image to have no effects on any of the div's events.
    - Maximus

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To jkd:

    Yes, but as far as I know, IE does not support event.stopPropagation(), so I didn't suggest it.

    To Maximus:

    Perhaps the relatedTarget/toElement event properties will help you? They correspond to the new element which has been moused over when the cursor left the presence of the division.

    Code:
    myDiv.onmouseout=function(evt) {
    	var newEl=evt.relatedTarget||event.toElement;
    	if(newEl==myImg)
    		return true;
    	alert('This alert will only appear if you mouse-out of the div and not into the image element.');
    }
    Hope that helps!

    Happy coding!

  • #14
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Actually it helped quite a lot. Thanks. For those that might care this is the code I used, it won't work directly when pasted into a script but you can understand how it works by the names and such. The childNodes[0] represents the image, and "obj" represent the cusotm JS object representing a header item:

    Code:
    if(type=='onmouseout' && obj.type == 'hdr') {
    	var toEl=event.target||event.toElement;
    	var fromEl=event.relatedTarget||event.fromElement;
    	if(toEl==obj.tag.childNodes[0]&&fromEl==obj.tag)
    		return;
    	if(fromEl==obj.tag.childNodes[0]&&toEl==obj.tag)
    		return;
    }
    if(type=='onmouseover' && obj.type == 'hdr') {
    	var toEl=event.target||event.toElement;
    	var fromEl=event.relatedTarget||event.fromElement;
    	if(toEl==obj.tag.childNodes[0]&&fromEl==obj.tag)
    		return;
    	if(fromEl==obj.tag.childNodes[0]&&toEl==obj.tag)
    		return;
    }
    What this code does is actually make it so the child image or node[0] does not make the parent node fire its mouseout/mouseover when you go over it. If there is a shorter way, please do tell. Oh and i know the if statements can be combined but i left them separate for understandability. So thanks nolachrymose and you also taught me something else, i didn't know you could go var x = y||z; i was always doing it x = y?y:z;
    - Maximus

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There's a method in IE called "contains()" which you can use to evaluate the relationship between two nodes - it returns whether one contains the other. This can be used for exactly the purpose you need - whether the to-element is inside or outside the from-element.

    jkd came up with a prorotyped version for mozilla in this thread http://www.codingforums.com/showthre...6823#post82802

    If you add contains() as an expando method of an actual element then you'll be able to use it cross-browser, as I did in this simple menu script http://www.brothercake.com/scripts/listmenu/
    Last edited by brothercake; 04-23-2004 at 04:42 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

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