Preventing Child from firing parent's click event

css, javascript, jquery

Solution

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

Problem

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"

Original source