jquery onclick penetrating to parent element

Question

How would I stop onclick for an inner element from also clicking through to its parent element.

<div id="1" onclick="alert('1')">
<div id="2" onclick="alert('2')"></div>
</div>

If the second div (id="2") is visibly on top of the first, and it is clicked, You will get both alerts 1 & 2.

How can I avoid this so I only get the alert from what I'm (visibly) clicking on, Without completely disabling any onclick function the outer div may possess.

Example: http://jsfiddle.net/DPCx8/

Answer 1

​var outer = document.getElementById('outer');
outer.onclick = function(event)
    {
        alert('outer');
        event.stopPropagation();
    }​​
    var inner = document.getElementById('inner');
inner.onclick = function(event)
    {
        alert('inner');
        event.stopPropagation();
    }

http://jsfiddle.net/DYykA/1/

Answer 2

You need to stop the propagation at the child, so the event doesn't bubble up to the parent.

$("#inner").on("click", function(e){
  e.stopPropagation();
});

Answer 3

use event.stopPropogation(); to prevent bubbling of event