How do I invoke onmoueout handler when leaving group of children

[Ron Brennan]

I'm adding a number of <div> children to the <span> element below. I want to
have 'mouseOut' invoked only when I leave the box surrounding the <span>
(and therefore all of its children).

The code below invokes mouseOut both when I enter the box and when I leave
it.

I've been stuck on this for a couple of days and would appreciate any help.

Thanks, Ron.

<td onmouseout='mouseOut()'>
<span id='proxyList' onmouseout='window.event.cancelBubble=true'
style='border:1px
solid #ddeeff padding:5px;width:100%;background-color:white'>
</span>
</td>

 

[Yann-Erwan Perio]

I'm adding a number of <div> children to the <span> element below.

Is this legal HTML?

I want to
have 'mouseOut' invoked only when I leave the box surrounding the <span>
(and therefore all of its children).

You cannot really control when the mouseout event will fire, but you can
check whether the "related" target (the target where the event is
"going to" or "coming from") is contained in the target, and trigger the
mouseout code accordingly.

---
<div id="foo"><span>Hello, </span><span>World</span></div>

<script type="text/javascript">
function contains(container, containee){
if(container.contains) return container.contains(containee);
else if(typeof containee.parentNode!="undefined"){
while(containee && containee!=container)
containee=containee.parentNode;
return !!containee;
}
return false;
}

if(document.getElementById){
document.getElementById("foo").onmouseout=function(evt){
var rel;

evt=evt||window.event;
rel=evt.relatedTarget||evt.toElement;

if(!contains(this, rel)){
window.status="Do something" + new Date().getTime();
} else {
window.status="Do nothing" + new Date().getTime();
}
};
}

The code below invokes mouseOut both when I enter the box and when I leave
it.

This is because the browser considers that before entering an element it
has to leave another - there's no inner-outer-element sort of reasoning;
adding mouseover handlers would show you the full process.

Try searching the archives at http://groups.google.com/ for
"fromElement", "contains", "toElement", "relatedTarget", "mouseenter",
"mouseleave".


HTH
Yep.

 

[Ron Brennan]

Yep's (professional) response accomplished exactly what I described and
wanted to do.

 

[Thomas 'PointedEars' Lahn]

Is this legal HTML?

It is invalid HTML. SPAN is an inline-level element
and must not contain block-level elements like DIV.
It may contain other inline-level elements and text
nodes only.


PointedEars