javascript onmouseout applied to div fired by children

views:

863

answers:

+1 Q:

javascript onmouseout applied to div fired by children

I'm having trouble finding a solution to this via google but I would have assumed it would be quite a common problem. I have a div which I have applied an onmouseout event handler to (the handler is used to roll a menu up using jquerys "slideup" function, as I would like the menu to be hidden when the mouse leaves). Problem is that the child elements of that div also cause the handler to fire (I accept that this is by design due to the nature of the bubbling event model). Now what I would like to know is what is the best way to ignore these events that are triggered by the divs children and only roll the menu up when the mouse leaves the div the event is applied to.

Thanks

No, it's not by design, you've accidentally applied your 'onmouseout' to too many divs. You only want to apply it to one.

Noon Silk 2009-08-15 03:33:32

I had only applied it to the one div and if you consider the bubbling event model I would determine that it is a by design behaviour. Have a look at the link to quirks mode in @Vineet Reynolds answer to this question.

Simon Fox 2009-08-15 05:33:41

I'm sorry but you're wrong. You've applied it to more than 1 div.

Noon Silk 2009-08-15 06:25:24

read the linked post

Simon Fox 2009-08-15 11:09:35

Sorry Simon but I think *you* need to read it. I quote from it "... and both have an onClick event handler ..." So he's saying both elements have the event specified. Which is what I'm telling you. You've applied it to more than one div, so all events are fired. Of course you can cancel the general event (as others have said) but my comment is still correct.

Noon Silk 2009-08-15 11:18:53

Sorry, right site wrong article. Try this http://www.quirksmode.org/js/events_mouse.html

Simon Fox 2009-08-15 11:26:11

Simon, I won't be replying again. But please understand that you are wrong; even that article confirms it. When I test two divs one inside the other, with the outer having the 'onmouseout' the event only fires once; when I expect it to. The articles on those sites are correct, and perhaps we just have a general misunderstanding. Regardless, it's not worth further discussion.

Noon Silk 2009-08-15 11:33:11

Simon you can check who has trigged the event using jquery Event.target property.

Cleiton 2009-08-15 03:36:58

+4 A:

What you are looking for is mouseenter and mouseleave.

A good example can be found at this link (they have compared both mouseenter and mouseover)

http://docs.jquery.com/Events/mouseover

A blog entry

http://blogs.sun.com/greimer/entry/mouse_over_out_versus_mouse

Alec Smart 2009-08-15 03:38:08

hmm i dindt know these events

Cleiton 2009-08-15 03:46:40

Note: these are not standard W3C events. They are only natively implemented in IE... jQuery makes them work by binding regular mouseover/out events and only triggering once, when the target is the intended target.

J-P 2009-08-15 08:06:04

+1 A:

You might want to attempt cancelling the event bubbling or propagation. Quirksmode.org has a handy section explaining how to turn off bubbling or propagation in both the models.

Since JQuery presents the W3C standards to developers, you will not need to set the cancelbubble property. Calling stopPropagation() method will be enough.

Vineet Reynolds 2009-08-15 03:47:39

ansaurus

tags:

views:

answers:

javascript onmouseout applied to div fired by children

related questions