how to click() only clicked DIV, not containing DIV?

Question

<div id="firstDiv" style="width:1000px;height:600px;">
    <div id="secondDiv" style="width:200px;height:200px;"></div>
</div>

Both DIVs have click() events. When I click secondDiv, the click-event for firstDiv is also fired (I guess that is logic since I also clicked within firstDiv's borders). I however only want to fire the click-event for the DIV that I actually had my mouse over upon clicking.

How can I accomplish that?

duplicate http://stackoverflow.com/questions/2015041/two-differents-onclick-on-two-divs-one-over-the-other — Mandar, Apr 23 '13 at 20:35
possible duplicate of [click - only on "direct" onclicks](http://stackoverflow.com/questions/6512803/click-only-on-direct-onclicks) — Nope, Apr 24 '13 at 17:18
[`event.stopPropagation`](http://api.jquery.com/event.stopPropagation/)? — Salman A, Apr 24 '13 at 19:29

score 10 · Accepted Answer · answered Apr 23 '13 at 20:35

10

On the inner div add:

$('#secondDiv').click(function(e){e.stopPropagation();});

.stopPropagation() will prevent the click event from bubbling up from inner div to the parent div or any other ancestor.

answered Apr 23 '13 at 20:35

j08691

204,283
31
260
272

score 5 · Answer 2 · answered Apr 23 '13 at 20:36

5

DOM elements by default bubbles up the events. You can stop by using stopPropagation

$('#secondDiv').on('click', function(e){
    e.stopPropagation();
});

answered Apr 23 '13 at 20:36

Teja Kantamneni

17,402
12
56
86

@user125697 I think you used `preventDefault`. You should be using `stopPropagation` – Teja Kantamneni Apr 23 '13 at 20:38

score 1 · Answer 3 · answered Apr 23 '13 at 20:36

1

You can just do this -

$('#secondDiv').click(function(event) {
    // do your stuff
    return false;
 });

return false; is the equivalent to event.stopPropagation() and event.preventDefault()

answered Apr 23 '13 at 20:36

Adil Shaikh

44,509
17
89
111

Brandon Buck · Answer 4 · 2013-04-23T20:47:57.917

1

You'll want use event.stopPropagation() which will prevent the event from bubbling up to parent elements (in your case). The preventDefault looks promising but it actually prevents default actions - not bubbling.

$("#firstDiv").click(function() {
  alert("Div One");
});

$("#secondDiv").click(function(e) {
  e.stopPropagation();
  alert("Div Two");
});

Demo of both here.

edited Apr 23 '13 at 20:47

answered Apr 23 '13 at 20:37

Brandon Buck

7,177
2
30
51

score 0 · Answer 5 · answered Apr 23 '13 at 20:37

0

You can use event.stopPropagation() for this bubbling. Something like this:

$("secondDiv").click(function(event) {
  event.stopPropagation();
   //Write your logic here
});

For more information on this refer to the documentation HERE

answered Apr 23 '13 at 20:37

Raman

1,336
10
13

how to click() only clicked DIV, not containing DIV?

5 Answers5