get event of child element without triggering same event for parent

get event of child element without triggering same event for parent

I have parent node and child node. They both have 'click' event listners.
Since <a> is child element, I cannot click on it without clicking on
parent <div&gt, so always event for parent <div&gt is triggered. How can I
get event for child element <a&gt without triggering one for parent
<div&gt? Here is the jsFiddle and the code:
HTML
<div id="container">
<a href="" id="link"></a>
</div>
CSS:
#container {
width:100px;
height:100px;
background:blue;
position:relative;
cursor:pointer;
}
#link {
width:20px;
height:20px;
background:green;
position:absolute;
top:10px;
left:10px;
}
JS:
$('#container').on('click', function() {
alert('container');
});
$('#link').on('click', function() {
alert('link');
});