cs.punk Posted July 2, 2012 Share Posted July 2, 2012 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Test Jquery</title> <script src="jquery-1.7.2.js" type="text/javascript"></script> <script type='text/javascript'> $(document).ready( function() { $("div.ratingBar").on("mouseover", 'img', function(event) { console.log("MouseOVER occured on img."); console.log("..."); }); $('div.ratingBar').mouseout(function(event) { var html_id = event.target.id; console.log("MouseOUT occured of ratingBar"); console.log("ID ACTUAL: " + html_id); console.log("..."); }); } ); </script> </head> <body> <div class='mainDiv' style='background: none repeat scroll 0% 0% pink; border-style: solid; border-width: 20px; border-color: rgb(0, 255, 0);'> <div class='ratingBar' id='rating_3' style='width: 300px; background: none repeat scroll 0% 0% blue; border-style: solid; border-width: 20px; border-color: rgb(115 0, 204);'> <img id='3_1' src='star.gif' /><img id='3_2' src='star.gif' /><img id='3_3' src='star.gif' /><img id='3_4' src='star.gif' /> </div> </div> </body> </html> I'm running into a Jquery issue here (potentially it might just be normal javascript behaviour too). I've tried to replicate the behavior with the above code. I'm using using Firefox 12 btw. If you move you mouse cursor to one of the images (star.gif) and directly move to the next image, the mouseout event of the 'ratingBar' div fires (yet it hasn't 'left the div, imo)? There are no gaps between the images however. Is this due to perhaps event propagation due to the image's 'mouseout' event firing? Quote Link to comment Share on other sites More sharing options...
cs.punk Posted July 2, 2012 Author Share Posted July 2, 2012 Seems like I've answered my own question. I added this: $('img').mouseout(function(event) { event.stopPropagation(); }); And the behavior stops. This would mean however I would need to add the above code to every child element within the div... Is there a more effective way to do prevent this from happening? Quote Link to comment Share on other sites More sharing options...
haku Posted July 2, 2012 Share Posted July 2, 2012 try mouseenter() and mouseleave() instead of mouseover() and mouseout(). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.