How to trigger an event on a parent but not on its child in jQuery

Question

I have this piece of html:

<div id="parent">
     <div id="child></div>
</div>

and it looks graphically like this:

---------------------------
-                         -
-    #parent              -
-                         -
-         ----------      -
-         -        -      -
-         - #Child -      -
-         -        -      -
-         ----------      -
-                         -
---------------------------

How do I trigger an event in jQuery (roll over for example) that will work only when hovering on the #parent but will not work when hovering on the #child

Answer 1

you can use event.stopPropagation()

question similar to it is jquery stop child triggering parent event

$("#parent").click(function(event){
  //do something with parent

});
$("#child").click(function(event){
  event.stopPropagation();

});

Answer 2

I think looking into event.stopPropagation would do the trick...

$("#someElement").click(function(event){
  event.stopPropagation();
  // do something
});  

http://api.jquery.com/event.stopPropagation/

Answer 3

If you return false from an event handler, it will stop the event from bubbling up to the next ancestor.

http://jsfiddle.net/jbabey/CV76D/

$('#outer').mouseover(function () {
    $(this).addClass('green');
});

$('#inner').mouseover(function () {
    return false;
});

Answer 4

$('#parent').on('click',function(e){
    if(e.target === document.getElementById('child')) return false;
    // your code 
})

However in my point of view it will be better to resort to .stopPropagation(), as others said