E.stopPropagation () and jQuery.hover ()

Question

Is there a way for both of these two groups to work together, or do I need to try using mouseenter and mouseleave instead?

Answer 1

You can use event.stopPropagation() with .hover() , but you are actually using mouseenter and mouseleave with .hover() anyway. If you provide 1 .hover() function, it works in both cases, if you provide 2 functions, the first is the mouseenter handler, the second is the mouseleave handler.

However, perhaps this is not the way you are after ... since mouseenter does not start when you enter a child , which is really why it exists, mouseout will fire when you enter a child. You can see that there is no difference in the demo here , hover from top to bottom, comment and uncomment .stopPropagation() , it does not matter ... because the event does not bubble with the parent.

However, if you use mouseover and mouseout , then that matters, for example:

 $("li").mouseover(function(e) { $(this).addClass("red").parents().removeClass("red"); }).mouseout(function(e) { $(this).removeClass("red"); });​ 

Now we have a problem with bubbles, because the event is bubbling up, adding a class to the parent, from which we just deleted it, see the problem demonstration here . However, if we stop this bubble, with .stopPropagation() , we get the desired effect, for example:

 $("li").mouseover(function(e) { $(this).addClass("red").parents().removeClass("red"); e.stopPropagation(); }).mouseout(function(e) { $(this).removeClass("red"); });​ 

In this demo, you see how it works differently .

In short: yes, event.stopPropagation() works with .hover() , but most likely this is not quite what you need.