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

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 wa开发者_如何学Pythonnt that to happen if they clicked on a link within that section.

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).

var $section = $(".section");
$section.click(function(e) {
    if ($(e.target).get(0) == $section.get(0)) {
        alert("expanding...");
    }
});

http://jsfiddle.net/yLMVy/

$(".section").click(function(e) {
    if($(e.target).is('a')) {
      return;
    }

    // code to expand/collapse section
});

e.target points to the element on which the user had clicked. So the function checks whether the target was a a element. if yes, it just returns from the function

use return false; in the end of function