JQuery freezes with items with children

Question

I have this code:

<div class"classNameFather"> <div class="className"> <div class="className"> <div.... (unlimited elements) </div> </div> </div> $('.className').hover(function() { //do hover stuff }, function() { //do mouseout stuff }); $('.classNameFather').hover(function() { //do hover stuff }, function() { //do mouseout stuff }); 

So, what I'm trying to do is when I find the last element, the second or third ... all parents do not soar ....

Only the first element has a different class name, and there are no restrictions for children ....

thanks

Answer 1

Use event.stopPropagation() to stop the event from bubbles.

 $('.className').hover(function(e) { e.stopPropagation(); //do hover stuff }, function(e) { e.stopPropagation(); //do mouseout stuff }); $('.classNameFather').hover(function(e) { e.stopPropagation(); //do hover stuff }, function(e) { e.stopPropagation(); //do mouseout stuff }); 

---

Refresh

Depending on the actual effect you want to accomplish, you may need to use the .mouseover() and .mouseout() .hover() instead of the .hover() that uses ( .mouseenter() and .mouseleave() ).

The difference can be seen in this demo http://jsfiddle.net/gaby/Zse5V/