How to have two separate onClick events with one element inside the other?

Question

I have an element <div>inside another <div>. I have an onClick event in the containing div, but I want the inner div to ignore this onClick event, because I have a separate onClick event that happens in this. Here is a sample code:

<div id='container' onClick='javascript:function1();'>
  outside of the inside div
  <div id='inside' onClick='javascript:function2();'>
    inside the inside div
  </div>
</div>

Imagine a container is one big box and an inner div is a smaller box inside. Basically, how the code works, every time I click “inside”, it launches as onClick even for “container” and “inside”. I do not want it; I want everyone to have their own onClick event. Is it possible?

Answer 1

function2() return false, .

jquery , HTML document.ready

HTML

<div id='container'>
  outside of the inside div
  <div id='inside'>
    inside the inside div
  </div>
</div>

JQuery

$(function(){
    $("#container").click(function(){
        function1();
    });

    $("#inside").click(function(){
        function2();
        return false;
    });    
});

event.stopPropagation() false.