Tutorial :How do I ignore mouse events on child elements in jQuery?


I have an unordered list with mouseover and mouseout events attached to the li elements. Each contains a link and there is a bit of padding in the li. When I mouseover the li the mouseover event is fired, but when I mouseover the link contained in the li the mouseout and the mouseover events are both fired in order. It seems the child elements are firing their parent elements mouse events...how do I go about stopping this? I want it to just stay mouseovered when mousing over the links, not activating the animations every time I mouse over a link. This is my code;

 jQuery(document).ready(function(){        jQuery('#menu li ul').hide();        jQuery('#menu li').mouseover( function() {             jQuery(this).children("ul").show('fast').stop;             return false;        });        jQuery('#menu li').mouseout( function() {             jQuery(this).children("ul").hide('fast').stop;             return false;        });   });     <ul id="menu">        <li><a href="">Some link</a>             <ul>Sub content</ul>        </li>   </ul>  


It seems I've found the answer to my own question. For anyone who might have the same problem; try this code instead. It seems hover doesn't bubble into child elements like the other mouse events do.

jQuery('#menu li').hover(      function() {          jQuery(this).children('ul').show('fast');          return false;      },      function() {          jQuery(this).children('ul').hide('fast');          return false;      }  );  


Use "event.stopPropagation()" to stop the events from bubbling upwards:

  jQuery('#menu li a').mouseover( function(evt) {         evt.stopPropagation();         return false;    });    jQuery('#menu li a').mouseout( function(evt) {         evt.stopPropagation();         return false;    });  

Alternatively use the mouseenter and mouseleave events instead of mouseover/out. jQuery normalizes their behaviour across browsers and these events have the benefit of not bubbling...


I was looking for the equivelant behavior in JS where in AS3 you can put:

object.mouseenabled = false;  

The way I found that works pretty well is to use CSS and put:

.element { pointer-events: none; }  

(but I guess that only works if you don't need the element for anything at all. I use it for tooltips that pop up on hover, but don't want it to act weird when you move your mouse away).


You can try this

$('#menu li').live('mouseenter mouseleave', function (e) {      if (e.type == 'mouseenter') {          //Show ul      } else {          //Hide ul      }  });  

The advantage is a usage of event delegation. Good luck!


Use css classes to distinguish the different menu levels. You can then easily search for one class or the other in your jQuery selectors.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »