How to ignore click event when clicked on children

Question

So I have the following scenario:

<div id="block"> Sample text. <a href="#">Anchor link</a> </div>  <script type="text/javascript">     $("#block").click(function() { alert('test'); }); </script> 

When I click anywhere inside the div, I'm getting the 'test' alert. But, I want to prevent that from happening when I click on the "Anchor link". How can I implement that?

Thanks

Answer 1

You can stop the clicks from bubbling up from links with an additional handler, like this:

$("#block a").click(function(e) { e.stopPropagation(); }); 

The the alternative we were discussing in comments:

$("#block").delegate('a', 'click', function(e){ e.stopImmediatePropagation(); })            .click(function() { alert('test'); });​ 

This would prevent any child links from bubbling up (well, not really, but their handlers from executing), but not create a handler for each element, this is done via .stopImmediatePropagation().

Answer 2

This is what you need: http://api.jquery.com/event.target/ .

Just compare to check if the element was triggered by the element you want or one of its children.