473,320 Members | 2,162 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

event.stopPropagation() does not work

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
3 16885


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


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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Barton | last post by:
Hello, I've got a table row with an onClick event that loads page1. Now I do not want to apply this event to one cell of that row because that cell contains already a link to another page. How...
1
by: SomeGei | last post by:
Hey guys.... i have a really big table... and the <tr> tags have onclick/onmouseover events that highlight a row when you drag your mouse over it, and open a popup window when you click anywhere...
4
by: phil_gg04 | last post by:
Dear Javascript Experts, I'm currently implementing Anyterm, a terminal emulator on a web page. It consists of an Apache module, some XmlHTTP and a bit of Javascript. The idea is to give you...
10
by: David | last post by:
Is there something that I can use to prevent the a user from dragging something, an image for instance. In IE I can use the ondrag = "return false;", is there a way to achieve the same way with...
17
by: dan_williams | last post by:
I have the following test web page:- <html> <head><title>Test</title> <script language="Javascript"> <!-- function fnTR() { alert("TR"); }
3
by: gert | last post by:
<table onclick="do_something()"> <tr> <td id=1 onclick="do_something_else()"></td> </tr> <tr> <td id=2></td> </tr> </table> how can i make a do_something event that only happens when the
6
by: blaine | last post by:
Hello, I'm currently overriding function keys (F1 to F4) to perform other actions. In order to do this the default popup windows of Help (F1), Seach(F3) etc must be turned off. In FF it's easy...
3
by: Chamnap | last post by:
Hello everybody, I have one problem. I want to do something after the user finished scrolling. The scroll event fires whenever the user is scrolling. I don't want this actually. Does anyone has...
8
Jezternz
by: Jezternz | last post by:
I came across a very interesting problem recently. Basicly I am building an editor and I want to take advantage of hot keys. I got it working perfectly in Internet Explorer, But I hit problems when I...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.