Handle clicks on an element but not clicks on links within that element

Question

How do I handle clicks on an element but not clicks on links within that element? Say I have the following

<div class="section">
    Some text blah blah
    <a href="#">Link</a>
</div>
<script>
    $(".section").click(function() {
        // code to expand/collapse section
    });
</script>

And I want users to be able to click on .section in order to expand/collapse it but I don't want that to happen if they clicked on a link within that section.

Answer 1

You can check the event target, and only do something if it is the div. Here is one example:

$(".section").click(function(e) {
    if(e.target.tagName !== "DIV") {
      //Not the div! 
    }
});

You can test various properties of the target, so if for example you had other child div elements, but didn't want to register clicks on those, you could use the className property:

e.target.className !== "section"

Here is a working example (using the tagName property).