Can't stop event from bubbling up

D

deepwater

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. 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 code in cancelEvent is identical to numerous
samples I've seen on the web. Ideas, anyone?

<html>
<head>
<script language=javascript>

function cancelEvent(e){
var e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
e.returnValue = false;
}
}

function hideBorder(divObj){
divObj.style.borderColor="#ffffff";;
}
function showBorder(divObj){
divObj.style.borderColor="#000000";
}
</script>
</head>

<body>
<div id="mydiv" style="border:1px solid #000000; width:800px;"
onMouseOut="hideBorder(this);" onClick="showBorder(this);">

<br><br><br>

<span onMouseOut="cancelEvent(event);">mousing over should NOT
cause the box to disappear</span>

<br><br><br>
</div>
</body>
</html>
 
A

Alexey.Guzenko

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. 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 code in cancelEvent is identical to numerous
samples I've seen on the web. Ideas, anyone?

<html>
<head>
<script language=javascript>

function cancelEvent(e){
var e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
e.returnValue = false;
}

}

function hideBorder(divObj){
divObj.style.borderColor="#ffffff";;}

function showBorder(divObj){
divObj.style.borderColor="#000000";}

</script>
</head>

<body>
<div id="mydiv" style="border:1px solid #000000; width:800px;"
onMouseOut="hideBorder(this);" onClick="showBorder(this);">

<br><br><br>

<span onMouseOut="cancelEvent(event);">mousing over should NOT
cause the box to disappear</span>

<br><br><br>
</div>
</body>
</html>
Click to expand...

you can use "onmouseleave" event

this example works perfectly:
<html>
<head>
<script language=javascript>

function cancelEvent(e){
var e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
e.returnValue = false;
}

}

function hideBorder(divObj){
divObj.style.borderColor="#ffffff";;
}

function showBorder(divObj){
divObj.style.borderColor="#000000";
}

</script>
</head>

<body>
<div id="mydiv" style="border:1px solid #000000; width:800px;"
onmouseleave="hideBorder(this);" onClick="showBorder(this);">

<br/><br/><br/>
wer
<br/>
gwer
<br/>
gw
<br/>
erg
<br/>
wer
<br/>
gw
<br/>
ergwergwergwerg
<br/>

<span>mousing over should NOT
cause the box to disappear</span>

<br/><br/><br/>
wer
<br/>
gwer
<br/>
gw
<br/>
erg
<br/>
wer
<br/>
gw
<br/>
ergwergwergwerg
<br/>
</div>
</body>
</html>
 
A

Alexey.Guzenko

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. 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 code in cancelEvent is identical to numerous
samples I've seen on the web. Ideas, anyone?

<html>
<head>
<script language=javascript>

function cancelEvent(e){
var e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
e.returnValue = false;
}

}

function hideBorder(divObj){
divObj.style.borderColor="#ffffff";;}

function showBorder(divObj){
divObj.style.borderColor="#000000";}

</script>
</head>

<body>
<div id="mydiv" style="border:1px solid #000000; width:800px;"
onMouseOut="hideBorder(this);" onClick="showBorder(this);">

<br><br><br>

<span onMouseOut="cancelEvent(event);">mousing over should NOT
cause the box to disappear</span>

<br><br><br>
</div>
</body>
</html>
Click to expand...

you can use "onmouseleave" event

this example works perfectly:
<html>
<head>
<script language=javascript>

function cancelEvent(e){
var e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
e.returnValue = false;
}

}

function hideBorder(divObj){
divObj.style.borderColor="#ffffff";;
}

function showBorder(divObj){
divObj.style.borderColor="#000000";
}

</script>
</head>

<body>
<div id="mydiv" style="border:1px solid #000000; width:800px;"
onmouseleave="hideBorder(this);" onClick="showBorder(this);">

<br/><br/><br/>
wer
<br/>
gwer
<br/>
gw
<br/>
erg
<br/>
wer
<br/>
gw
<br/>
ergwergwergwerg
<br/>

<span>mousing over should NOT
cause the box to disappear</span>

<br/><br/><br/>
wer
<br/>
gwer
<br/>
gw
<br/>
erg
<br/>
wer
<br/>
gw
<br/>
ergwergwergwerg
<br/>
</div>
</body>
</html>
 
A

Alexey.Guzenko

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. 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 code in cancelEvent is identical to numerous
samples I've seen on the web. Ideas, anyone?

<html>
<head>
<script language=javascript>

function cancelEvent(e){
var e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
e.returnValue = false;
}

}

function hideBorder(divObj){
divObj.style.borderColor="#ffffff";;}

function showBorder(divObj){
divObj.style.borderColor="#000000";}

</script>
</head>

<body>
<div id="mydiv" style="border:1px solid #000000; width:800px;"
onMouseOut="hideBorder(this);" onClick="showBorder(this);">

<br><br><br>

<span onMouseOut="cancelEvent(event);">mousing over should NOT
cause the box to disappear</span>

<br><br><br>
</div>
</body>
</html>
Click to expand...

you can use "onmouseleave" event

this example works perfectly:
<html>
<head>
<script language=javascript>

function cancelEvent(e){
var e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
e.returnValue = false;
}

}

function hideBorder(divObj){
divObj.style.borderColor="#ffffff";;
}

function showBorder(divObj){
divObj.style.borderColor="#000000";
}

</script>
</head>

<body>
<div id="mydiv" style="border:1px solid #000000; width:800px;"
onmouseleave="hideBorder(this);" onClick="showBorder(this);">

<br/><br/><br/>
wer
<br/>
gwer
<br/>
gw
<br/>
erg
<br/>
wer
<br/>
gw
<br/>
ergwergwergwerg
<br/>

<span>mousing over should NOT
cause the box to disappear</span>

<br/><br/><br/>
wer
<br/>
gwer
<br/>
gw
<br/>
erg
<br/>
wer
<br/>
gw
<br/>
ergwergwergwerg
<br/>
</div>
</body>
</html>
 
T

Thomas 'PointedEars' Lahn

<div id="mydiv" style="border:1px solid #000000; width:800px;"
onmouseleave="hideBorder(this);" onClick="showBorder(this);">
Click to expand...

The problem with this is, apart from being MSHTML-only, it is not Valid
HTML. That also applies to the rest of your code.


PointedEars
 
T

Thomas 'PointedEars' Lahn

deepwater said:
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.
Click to expand...

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.
Click to expand...

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.
Click to expand...

But the event type most certainly is not.
Ideas, anyone?
Click to expand...

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
 
T

Thomas 'PointedEars' Lahn

Thomas said:
<div onmouseout="handleMouseout(e)">
Click to expand...

Argh! Same mistake again. Should be

<div onmouseout="handleMouseout(event)">


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

event bubbling 4
event bubbling 0
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
Help with code 0
Need help , Having problem with Drag n Drop... 1
How do I fix this issue in sqaurespace code block? 1
Buttons lining up 1
I am trying to detect Which image id="" was clicked ? 22

Members online

No members online now.
Total: 64 (members: 0, guests: 64)
Robots: 521

Forum statistics

Threads
473,989
Messages
2,570,207
Members
46,782
Latest member
ThomasGex

Latest Threads

Top