Onmouseover/out fireing multiple times?

I have encountered an unusual quirk this morning with the aformentioned events.

When I run my mouse over the DIV Object in inquestion, it fire’s off several times. Does anyone know what might cause such a thing to happen?

I found the same quirk to be true with the onmouseout event which I also need to use.

Here is my code (sorry, its a PHP / Javascript / HTML / CSS mish-mash so I will add it with PHP tags)


<div id="mybox" onmouseover="box1();" style="border:1px solid #2380ba;width:197px;background-color:#1b90d9;<?if($numPendingRequests > 0){?>margin-top:5px;<?}?>padding-bottom:5px;">
										<p style="font-weight:bold;font-size:10pt;padding:5px;">Interactions:</p>
										<?
											$interactionLoopCount = 1;
											foreach($arrIds as $friendId)
											{
												?>
													<div id="interaction<?echo $interactionLoopCount;?>" style="<?if($interactionLoopCount > 1){?>margin-top:5px;border-top:1px solid #2380ba;<?}?>">
														<p style="font-size:8pt;padding:5px 5px 0px 5px;">
															<span style="font-weight:bold;"><?echo ucfirst($friendId);?></span><?echo funcA();?>.
														</p>
														<div style="width:160px;font-size:8pt;padding:5px 5px 0px 5px;">
															<a href="javascript:funcB('<?echo $_GET['alias']?>', '<?echo $friendId;?>', 'interact<?echo $interactionLoopCount;?>')" >Interact Back!</a>
															| <a href="funcC()" >Remove</a>
														</div>
														<div style="clear:both;"></div>
													</div>	
												<?
												$interactionLoopCount ++;
											}
										?>	
									</div>

@johnuk - what you are seeing is actually a part of the Event specification known as “event bubbling” (see this)…

basically, what event bubbling boils down to is this: say you have an LI element, with a nested A element. if you move the mouse over the LI, a mouseover event is fired. if, however, you move the mouse inside the A, the LI will fire a mouseout event, and the A will fire a mouseover event. if you move the mouse back outside of the A, but still inside the LI, the A will fire a mouseout event and the LI will fire another mouseover event.

it sounds tricky, but it’s really not. event bubbling is also the cornerstone to event delegation, which is a critical part of modern application development.

my suggestion would be to use jQuery or another lib that supports “mousenter” and “mouseleave” events. these are similar to mouseover/mouseout, but include child elements as well. so, using the previous example, if you listened for mouseenter events on the LI, there would only be one fired, even if the mouse was over the A element. similarly, the mouseleave event wouldn’t be fired until the mouse had left the LI. hope that helps :slight_smile: