SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Somerset, England
    0 Post(s)
    0 Thread(s)

    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)
    Code PHP:
    <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();?>.
    														<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 style="clear:both;"></div>
    												$interactionLoopCount ++;

  2. #2
    SitePoint Member
    Join Date
    Jun 2010
    0 Post(s)
    0 Thread(s)
    @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


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts