Re: Can't stop event from bubbling up

deepwater wrote:

Imagine, if you will, a span (with text) inside of a div which has a
black border. I assign the onMouseOut event of the div to color it
white, i.e., make it disappear. But when I mouse out of the span (while
still in the div), the border also turns white. I don't want this. I
understand that the onMouseOut event is bubbling up to the parent
element.

True, however that is _not_ the cause of your problem.

And I have read and tried (for several hours now :-) how to prevent this
behavior by attaching an onMouseEvent to the span which captures the
event and stops it from bubbling/propagating up to the div. But I can't
get this to work on Firefox, Safari or IE and don't know why.

The `mouseout' event for the `div' element occurs shortly before the
`mouseover' event of the `span' element, when the pointer is moved onto the
`span' element.

The `mouseout' event for the `span' element, which you handle, occurs only
when the pointer is moved away from the `span' element, shortly before maybe
the `mouseover' event for the `div' element occurs.

IOW: You are too late.

The code in cancelEvent is identical to numerous samples I've seen on the
web.

But the event type most certainly is not.

Ideas, anyone?

Valid markup would be a good start. http://validator.w3.org/

Then:

function handleMouseout(e)
{
// although I doubt this is necessary
if (!e) e = window.event;

var
// W3C DOM Level 2+ Events
relatedTarget = e.relatedTarget,
currentTarget = e.currentTarget;

// MSHTML DOM
if (!(relatedTarget && currentTarget))
{
relatedTarget = e.toElement;
currentTarget = e.srcElement;
}

if (relatedTarget && currentTarget
&& currentTarget == relatedTarget)
{
hideBorder(currentTarget);
}
}

<div onmouseout="handleMouseout(e)">
...
</div>


See also http://PointedEars.de/scripts/test/dom/hoverMe


HTH

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

Thomas 'PointedEars' Lahn wrote:

div onmouseout="handleMouseout(e)"

Argh! Same mistake again. Should be

<div onmouseout="handleMouseout(event)">


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee