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/