Preventing Child from firing parent's click event

Question

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"

Answer 1

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(); });   

Answer 2

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";