I want a mouseout event to trigger only when I leave the parent element not when I mouseover a child element.

I've been using the script from quirksmode but it can be hard to get working.
Code:
function doSomething(e) {
	if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg != tg && reltg.nodeName != 'BODY')
		reltg= reltg.parentNode
	if (reltg== tg) return;
	// Mouseout took place when mouse actually left layer
	// Handle event
}

I have a function that needs to work only when the parent is moused out of.
I didn't make this script.

It's called by ondblclick="transition(document.getElementById('select1'),0,800,20)"
in the html

Code:
function transition(ele,dirflag) {

 if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
  var totDur = arguments[2] || 1000; // third argument, or one seconds
  var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
  var intrval = totDur/numSteps; // renamed so it can't conflict
  ele.sopac = 0; // we start at 0
  ele.shght = 50; // we start at 50px
  ele.eopac = 1; // we end at 1
  ele.ehght = 140; // we end at 140px
  ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment opac
  ele.ihght = (ele.ehght-ele.shght)/numSteps; // how much to increment hght
  ele.copac = parseFloat(ele.copac,10) || ele.style.opacity || ele.sopac; // a val for current
  ele.chght = ele.chght || parseInt(ele.style.height,10) || ele.shght; // a val for current
  ele.dirflag = dirflag; // changed name to dirflag, stored for reference
  if(ele.intrans) clearInterval(ele.intrans); // clear timeout if already running...
  if(dirflag) { // 1 or true = increment
	// alter visibility here to make an invisible item visible before starting
	ele.style.display='block';
	ele.intrans= setInterval(function() {
	  if(ele.copac<ele.eopac ) { // if mods needed
		ele.copac=parseFloat(ele.copac,10)+parseFloat(ele.iopac,10); // increment
		if(ele.copac>ele.eopac) ele.copac=ele.eopac; // error correction
		ele.chght=parseFloat(ele.chght,10)+parseFloat(ele.ihght,10); // increment
		if(ele.chght>ele.ehght) ele.chght=ele.ehght; // error correction
		// set styles accordingly
		ele.style.opacity = ele.copac;
		ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
		ele.style.height = ele.chght+'px';
	  } else {
		clearInterval(ele.intrans); // we're done -- clear timeout
	  }
	},intrval); // do it on intrval timeline
  } else { 
  
 // 0 or false = decrement
	ele.intrans= setInterval(function() {
	  if(ele.copac>ele.sopac || ele.chght>ele.shght) { // if mods needed
		ele.copac=parseFloat(ele.copac,10)-parseFloat(ele.iopac,10); // decrement
		if(ele.copac<ele.sopac) ele.copac=ele.sopac; // error correction
		ele.chght=parseFloat(ele.chght,10)-parseFloat(ele.ihght,10); // decrement
		if(ele.chght<ele.shght) ele.chght=ele.shght; // error correction
		// set styles accordingly
		ele.style.opacity = ele.copac;
		ele.style.MozOpacity = ele.copac;
        ele.style.KhtmlOpacity = ele.copac;
		ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
		ele.style.height = ele.chght+'px';
	  } else {
		clearInterval(ele.intrans); // we're done -- clear timeout
		// and make the item disappear here since it's done transitioning.
		ele.style.display='none';
	  }
	},intrval); // do it on intrval timeline
  }
} // all done!

I tried to do this:
Code:
function transition(ele,dirflag,e){

if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg != tg && reltg.nodeName != 'BODY')
		reltg= reltg.parentNode
	if (reltg== tg) return;
	// Mouseout took place when mouse actually left layer
	// Handle event
if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
  var totDur = arguments[2] || 1000; // third argument, or one seconds
  var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
  var intrval = totDur/numSteps; // renamed so it can't conflict
  ele.sopac = 0; // we start at 0
  ele.shght = 50; // we start at 50px
  ele.eopac = 1; // we end at 1
  ele.ehght = 140; // we end at 140px
  ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment 
........
With this in the html onmouseout="transition(document.getElementById('select1'),1,800,20,event)

but it doesn't work. the event isn't getting passed to the function. i have tried to move the event before document.getElementById and put e before ele in the function but it still doesn't work. Nothing fires at all.

I've just added the quirksmode script to other functions in the past and had them work. I know this won't be the last time I need to stop problems with mouseover so can you give me some tips on what is going wrong.

and please no script librarys.