By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,480 Members | 1,743 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,480 IT Pros & Developers. It's quick & easy.

event.stopPropagation() does not work

P: n/a
I have a DIV that contains some links. I have an onmouseout event handler on
the DIV, and I want it triggered only when the mouse leaves the DIV. Since
there are Anchors in the DIV, onmouseout events will be generated when the
mouse moves from one link to another, and those events will bubble up to the
DIV. According to all the documentation that I have read, I should be able to
prevent that from happening by having an onmouseout event handler for each of
the anchors, and calling event.stopPropagation in the event handler. But it
is not working in Mozilla and Opera, the onmouseout still bubbles up from the
anchor to the DIV. I have it working in IE, but that is because IE does not
support stopPropagation(), and instead uses window.event.cancelBubble=true,
which Mozilla and Opera do not support.

Does anyone have any clue why stopPropagation() isn't working in Mozilla and
Opera?

You can see the problem in action here:
http://home.comcast.net/~delerious1/index4.html

Here is my HTML code:

<BODY onload="init()">
<DIV id="submenu" onmouseout="alert('Mouse has just left the DIV')">
<A href="fakepage.html">LINK 1</A>
<A href="fakepage.html">LINK 2</A>
<A href="fakepage.html">LINK 3</A>
<A href="fakepage.html">LINK 4</A>
<A href="fakepage.html">LINK 5</A>
</DIV>
</BODY>
Here is my Javascript code:

function init() {
var submenu = null;
if (document.getElementById)
submenu = document.getElementById('submenu');

for (var i=0; i<submenu.childNodes.length; i++) {
if (submenu.childNodes[i].addEventListener) {
// this code is for Mozilla and Opera
submenu.childNodes[i].addEventListener('mouseout',
disableEventPropagation, false);
}
else if (submenu.childNodes[i].attachEvent) {
// this code is for IE
submenu.childNodes[i].attachEvent('onmouseout',
disableEventPropagation);
}
}
}

function disableEventPropagation(event) {
if (event.stopPropagation) {
// this code is for Mozilla and Opera
event.stopPropagation();
}
else if (window.event) {
// this code is for IE
window.event.cancelBubble = true;
}
}
Here is the stylesheet I am using:

DIV {
background-color: red;
left: 10px;
top: 10px;
position: absolute;
}

A {
background-color: blue;
color: white;
display: block;
margin: 0 0 5px 0;
text-decoration: none;
}

A:hover {
background-color: cyan;
}

Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a


de*******@no.spam.com wrote:
I have a DIV that contains some links. I have an onmouseout event handler on
the DIV, and I want it triggered only when the mouse leaves the DIV. Since
there are Anchors in the DIV, onmouseout events will be generated when the
mouse moves from one link to another, and those events will bubble up to the
DIV. According to all the documentation that I have read, I should be able to
prevent that from happening by having an onmouseout event handler for each of
the anchors, and calling event.stopPropagation in the event handler. But it
is not working in Mozilla and Opera, the onmouseout still bubbles up from the
anchor to the DIV. I have it working in IE, but that is because IE does not
support stopPropagation(), and instead uses window.event.cancelBubble=true,
which Mozilla and Opera do not support.


See
http://www.faqts.com/knowledge_base/...d/1606/fid/145
for a solution, there is no need to set up event handlers for all those
descendant elements and to try to stop events from propagating, simply
use event.relatedTarget to distinguish a mouse leaving the element from
the mouse leaving a child element.


--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #2

P: n/a


de*******@no.spam.com wrote:
I have a DIV that contains some links. I have an onmouseout event handler on
the DIV, and I want it triggered only when the mouse leaves the DIV. Since
there are Anchors in the DIV, onmouseout events will be generated when the
mouse moves from one link to another, and those events will bubble up to the
DIV. According to all the documentation that I have read, I should be able to
prevent that from happening by having an onmouseout event handler for each of
the anchors, and calling event.stopPropagation in the event handler. But it
is not working in Mozilla and Opera, the onmouseout still bubbles up from the
anchor to the DIV. I have it working in IE, but that is because IE does not
support stopPropagation(), and instead uses window.event.cancelBubble=true,
which Mozilla and Opera do not support.

Does anyone have any clue why stopPropagation() isn't working in Mozilla and
Opera?

You can see the problem in action here:
http://home.comcast.net/~delerious1/index4.html


Well, write some code to inspect what is happening, for instance

javascript: var el = document.getElementById('submenu'); el.onmouseout =
function (evt) { alert(evt.type + ' for target ' + evt.target + ' with
relatedTarget ' + evt.relatedTarget); }; void 0

then you will see that mouseout events are fired on the div when the
mouse moves over a child element. The mouse can always only be over one
node so when the mouse has entered the div but then enters a child
element or node of the div then mouseout is fired on the div.
For an approach to handle the mouse leaving the div see my earlier posting.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #3

P: n/a
On Thu, 11 Dec 2003 12:03:19 +0100, Martin Honnen <ma*******@yahoo.de> wrote:
Well, write some code to inspect what is happening, for instance

javascript: var el = document.getElementById('submenu'); el.onmouseout =
function (evt) { alert(evt.type + ' for target ' + evt.target + ' with
relatedTarget ' + evt.relatedTarget); }; void 0

then you will see that mouseout events are fired on the div when the
mouse moves over a child element. The mouse can always only be over one
node so when the mouse has entered the div but then enters a child
element or node of the div then mouseout is fired on the div.
For an approach to handle the mouse leaving the div see my earlier posting.


Thanks for the replies. This will surely help me out.

Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.