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.
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?
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.
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?
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?
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:
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.
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.');
}
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;
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.
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/
__________________
"Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark
Last edited by brothercake; 04-23-2004 at 03:42 PM..
Before you post, read our: 
Event Handling with Child Nodes
