Multiple event listeners firing when single element is clicked

Question

If I have this HTML:

<div id="outer-layer">
    <div id="inner-layer"></div>
</div>

And this JS:

$(document).ready(function () {
    $("#outer-layer").click(function(){
       // FUNCTION 1
    });   
    $("#inner-layer").click(function(){
       // FUNCTION 2
    });        
});

When I click #inner-layer, both FUNCTION 1 and FUNCTION 2 fire. Is there a way for only FUNCTION 2 to fire?

I expected only FUNCTION 2 to fire, but both functions fired.