Preventing Child from firing parent's click event

Consider the following snippet:

<div class="div-outer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <div class="div-inner" style="background:red">
        Curabitur hendrerit vehicula erat, ut gravida orci luctus vitae.
    </div>
</div>

Now suppose the outer div has a live click associated with it. How do I make sure that the live click is not triggered when I click anywhere in the inner div?

Edit:

Here's the JS as requested

$(".div-outer").live("click",function(){alert("hi")}); 

This should not be triggereed when clicking on ".inner-div"

You have to add an event listener to the inner child and cancel the propagation of the event.

In plain JS something like

document.getElementById('inner').addEventListener('click',function (event){
   event.stopPropagation();
});

is sufficient. Note that jQuery provides the same facility:

$(".inner-div").click(function(event){
    event.stopPropagation();
});  

or

$(".inner-inner").on('click',function(event){
    event.stopPropagation();
});  

An alternative solution is to add a CSS Pointer Events rule to the child element:

CSS:

#childElement {
    pointer-events: none;
}

JavaScript:

document.getElementById("childElement").style.pointerEvents = "none";

Create new click listener for the inner div and call the event.stopPropagation() in that new event.

like

$('div-outer').on('click','div-inner',function(e){
    e.stopPropagation();
});