How do I handle a mouse event within an element, but not on one of its children?

Question

I want to handle a mousedown event one way on a parent element, but handle it differently if the event occurs on a child of that parent.

This:

$('.parent').on('mousedown', function(){
  //stuff
});

will fire if any element within .parent is clicked, but I want to trigger the function only if the parent element is the only element being clicked, not one of it's children. How can I do this?

Answer 1

Bind a handler to the child element, and use event.stopPropagation() in the child handler. Then the event won't bubble out to the parent.