Today I have a quick note for you that will probably save you time someday. Basically it’s a workaround for a bug when you have parent element with children elements and parent element has mouseover or mouseout event. Moving your mouse over children elements may fire mouseout
event of their parent. This is caused by event bubbling / propagation and if you would like to have a quick solution just read the solution at the bottom of this post. If you would like to understand it in more details please search Google for event propagation.
The problem:
When you have mouseover
and mouseout
events bound to some element on you page with children elements. Hovering over children element fires parent’s mouseover
and/or mouseout
event.
The solution:
The solution to this error is to use mouseenter
and mouseleave
events instead of mouseover
and mouseout
.
The reason:
This solution works because mouseover and mouseout events do not bubble from child to parent element.
preventdefault & stoppropagation doesnt work?
ReplyDeleteThanks hommie
ReplyDeleteI think this is intended behaviour since jQuery 1.3:
ReplyDeleteWhen you trigger events by using e.g. .click() events will bubble up through the DOM.
http://docs.jquery.com/Events/trigger
http://docs.jquery.com/Events/bind
I haven't experimented with this feature although.
Ever heard of event bubbling/propagation? This is normal and expected behaviour. An event will bubble up through the DOM until it reaches the top or it's halted with "event.stopPropagation()"
ReplyDelete@Astfgl, @James, Thanks for your replies. I know that you are referring to event bubbling here.
ReplyDeleteReading this post again, I now see that I have not made the main idea clear enough here. The main idea was that mouseenter and mouseleave events DO NOT BUBBLE!
I will rewrite the post later this day and will try to make the main idea clearer.
Thanks for your timely feedback. It's very much appreciated.
btw, use hover instead mouseouver, mouseout. its more clean
ReplyDelete$("selector").hover(function(){ /* mouseover */ }, function(){ / *mouseout */ });
nd you can use the stoppropagation to prevent the events from parent objects
Ok, but what about the hover() function?
ReplyDeleteIgnore it and use mouseenter and mouseleave?
@Carlos André Ferrari, @Barton, I totally agree that .hover() function is clearer to read and write your code, but in this article I am pointing out that:
ReplyDelete**QUOTE**
This solution works because mouseover and mouseout events DO NOT BUBBLE from child to parent element.
Does it matter to anyone else that mouseenter and mouseleave are not standard events? To date, these custom events are only available in IE. Of course you could use jQuery's custom event mechanism to recreate them, but for that amount of effort you could just roll your own solution using preventDefault or stopPropagation.
ReplyDeleteThe fact that mouseover and mouseout don't bubble is not a particularly interesting observation. If you're using jQuery, there's rarely good reason to bother with mouse* events to begin with.
ReplyDeleteYou shouldn't recommend that people use the non-standard mouseenter and mouseleave. Everyone working in javascript should understand event propagation and deal with it properly.
thx mate
ReplyDeleteHi:
ReplyDeleteI have started learning jquery from scratch and tried to show an alert box on mouseover event but not working i tried this mouseenter and mouseleave function which is suggested in this article but these are also not working.
For "onmouseover" the "hover" event is working.
But i have not got any solution for onmouseout event.
@twinkle, why don't you use .hover() [http://docs.jquery.com/Events/hover] function?!
ReplyDelete$("#box").hover(
function () {
// fired on mouseover
},
function () {
// fired on mouseout
}
);
Hi there,
ReplyDeleteJust wanted to say thanks for the post - totally overlooked the mouseenter/leave events and this was the exact solution I needed.
@those who said something about non/standard events - the post title says 'JQuery' so your comments are irrelevant.
@the guy who said 'for that amount of effort you could just roll your own solution' - '$("#id").mouseenter()' vs. manually handling propagation? Why bother using a framework at all then? :)
@those who suggested using hover - your comments are irrelevant to this post.
@those who suggested the author doesn't understand event bubbling/propagation - he explains it fine so chill.
Really just kinda tired of hearing ego-driven comments when there's nothing egregiously wrong with this post that's just out to help people.
Have a happy code-filled day.
Let's all advocate a constructive, a-hole-free dev community.
hi,
ReplyDeletejust wanna thank you about this solution, it's fixed my thumbnail gallery...
Most Verbose Anonymous:
ReplyDeletePlease be aware that mouseenter/mouseleave are -not- jquery features, but rather features of Internet Explorer and will not work on other browsers.
Thanks a lot !
ReplyDeleteBen
OMG thanks you so much ...
ReplyDeleteStruggling for hours with the problem, now sorted :-)
Great advice, you really did save me some time! Thank you!
ReplyDeleteWonderful. Was already lost in if/else constructions to check for parents and what not as the mouseout got triggered by my links within the toggled div.
ReplyDeleteThis made my headache go away.
Thanks.
Please stop with the misinformation:
ReplyDeletestopping propagation on mouseover does NOT achieve the same as mouseenter... sample code/prove here:
http://jsbin.com/ezito/edit
JT.
Actually, June13, both mouseenter and mouseleave -are- jquery features.
ReplyDeletedocumented here:
http://brandonaaron.net/blog/2009/03/26/special-events
linked from:
http://docs.jquery.com/Events/jQuery.Event#event.type
Thanks.
ReplyDeleteManish
NICE POST, helped me a much
ReplyDeleteNice Post Dude Thank you very much
ReplyDeletehi
ReplyDeletethis is rohit.
mouseout event & mouseleave event is not working in my jquery.
so can you guys help me to solve this problem?
thanks very much
ReplyDeleteThis indeed saved me some time, thank you very much!
ReplyDeleteG
Thank you very much! The .hover() method was my savior :)
ReplyDeleteThanks a lot!
ReplyDeleteFrom now, i love mouseenter()
Thats what i exactly need !
ReplyDeleteThanks a lot ;)
Was going 15 minutes on this one and finally found your blog post. Fixed. I replaced .hover() with mouseenter() Thanks.
ReplyDelete