javascript - jquery onclick penetrating to parent element - Stack Overflow

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 pletely disabling any onclick function the outer div may possess.

Example: /

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 pletely disabling any onclick function the outer div may possess.

Example: http://jsfiddle/DPCx8/

• javascript
• jquery
• onclick
• parent-child

Share Improve this question Follow asked May 11, 2012 at 6:56 d-_-bd-_-b 23.2k4343 gold badges171171 silver badges285285 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

​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/DYykA/1/

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

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