SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onmouseover / onmouseout & event bubbling

    I've been implementing a drop menu in javascript, and I'm finding it difficult to understand why the event bubbling system is implemented as it is.
    In summary, I want an event to occur when the mouse enters/exits a large div or table that contains many descendent elements.

    It appears to me, from experimenting with IE6 and Moz 5, that the event is generated *only* on the lowest element, thus given a table which contains tbody, tr and tds, with an onmouseover listener assigned to the table element (as a property), the onmouseover event is generated only for the td, although the mouse actually entered all these elements.
    If there is a slight gap between elements you sometimes get events for the higher element. I guess this is a side-effect of the browser's implementation - sampling the mouse position.

    My understanding of event bubbling from "JavaScript the definitive guide" is that events should bubble up the heirarchy unless they are stopped by the stopPropagation() method.

    Can anyone please explain this, or point me to the relevant specification area for the topic?

    I'm an experienced programmer, but new to JavaScript.

    Thanks.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are correct, as you can see in this example:
    Code:
    <html>
    <body>
    <table cellspacing="0" cellpadding="0" border="0" onmouseover="alert('table');">
    	<tr onmouseover="alert('tr');">
    		<td onmouseover="alert('td');">this is a td</td>
    	</tr>
    </table>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you only had an onmouseover defined on the table, e.g...

    <html>
    <body>
    <table cellspacing="0" cellpadding="0" border="0" onmouseover="alert 'table');">
    <tr >
    <td>this is a td</td>
    </tr>
    </table>
    </body>
    </html>

    I would expect it to be invoked 3 times, because 3 events occur as the mouse enters the table. one for the td mouseover, bubbling up (i.e. with the td as target) one for the tr and one for the table. This doesn’t happen, seemingly because the boundaries of the elements coincide.
    Do you know if this behaviour is specified anywhere?

    Thanks.

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the example I gave the three elements share the same space - ie there is no space between the table and the tr and the tr and the td, so onmouseover you are directly entering the td. If there is no event handler on the td or tr the table handler will fire.

    If each element had some padding then yes as you moved the mouse over the table, then tr, then td, the table handler would fire three times as you expect.

  5. #5
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your replies, Jim.

    I'd expect it to fire three times even if there was *no* padding. However, this expectation isn't based on having actually read the specification!

    I've found experimentally that if there is a small amount of padding and the mouse moves quickly you may not get all 3 events.


Bookmarks

Posting Permissions

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