stopPropagation and preventDefault Demo

HTML

<div id="parentDiv">
    <h1>The Parent Div</h1>
    <p><a href="http://api.jquery.com" id="childLink">Unruly Child Link</a></p>
    <p>Click anywhere in the div.</p>
    <p><a href="http://api.jquery.com" id="childLinkStopProp">Well-behaved Child Link</a></p>
    <p>Click down here, too. All over the div. Go ahead, click away.</p>
</div>

CSS

#parentDiv{border: 1px solid;padding: 0 0.25em}

JavaScript

$("#parentDiv").click(function() {
    alert("Parent div click function called.");
});

$("#childLink").click(function() {
    // click on this link will cause child and parent alert to fire
    alert("Unruly  child AND parent link click function called.\n\nProbably not what we  want.\n\nAnd, link will load page in href.");
});

$("#childLinkStopProp").click(function(e) {
    // click on this link will cause ONLY child alert to fire
    e.stopPropagation();
    // stop default action of link
    e.preventDefault();
    alert("Well-behaved child link click ONLY.\n\nAnd, link will NOT load page in href.");
});