Child element click event trigger the parent click event

Question

Say you have some code like this:

<html>
  <head>
  </head>
  <body>
     <div id="parentDiv" onclick="alert('parentDiv');">
         <div id="childDiv" onclick="alert('childDiv');">
         </div>   
      </div>
  </body>
</html>

I don't want to trigger the parentDiv click event when I click on the childDiv, How can I do this?

Updated

Also, what is the execution sequence of these two event?

this is called event bubbling,A good point to start :- http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing — Pranav, Dec 20 '12 at 06:55
The title of this question should be "Stop child event click from trigger parent click event" It reads as the opposite. — Iwnnay, Oct 04 '18 at 16:14

score 117 · Accepted Answer · edited Nov 22 '18 at 03:01

117

You need to use event.stopPropagation()

Live Demo

$('#childDiv').click(function(event){
    event.stopPropagation();
    alert(event.target.id);
});

event.stopPropagation()

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

edited Nov 22 '18 at 03:01

crifan

12,947
1
71
56

answered Dec 20 '12 at 06:52

Adil

146,340
25
209
204

7

if you have 2 separate handlers for the parent and the child click events and you want to trigger only the child handler by click event on the child, you have to call the event.stopPropagation() on the childDiv, not on the parentDiv – tsveti_iko Aug 16 '16 at 13:08

score 25 · Answer 2 · answered Dec 20 '12 at 06:55

25

Without jQuery : DEMO

 <div id="parentDiv" onclick="alert('parentDiv');">
   <div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
     AAA
   </div>   
</div>

answered Dec 20 '12 at 06:55

Akhil Sekharan

12,467
7
40
57

1

Thanks @Akhil It's Working for me. – amol rajput Oct 14 '20 at 06:45

score 9 · Answer 3 · answered Nov 23 '15 at 12:35

I faced the same problem and solve it by this method. html :

<div id="parentDiv">
   <div id="childDiv">
     AAA
   </div>
    BBBB
</div>

JS:

$(document).ready(function(){
 $("#parentDiv").click(function(e){
   if(e.target.id=="childDiv"){
     childEvent();
   } else {
     parentEvent();
   }
 });
});

function childEvent(){
    alert("child event");
}

function parentEvent(){
    alert("paren event");
}

score 7 · Answer 4 · answered Dec 20 '12 at 06:56

The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.

You can use the method event.isPropagationStopped() to know whether this method was ever called (on that event object).

Syntax:

Here is the simple syntax to use this method:

event.stopPropagation()

Example:

$("div").click(function(event) {
    alert("This is : " + $(this).prop('id'));

    // Comment the following to see the difference
    event.stopPropagation();
});

score 6 · Answer 5 · edited May 23 '17 at 11:47

6

Click event Bubbles, now what is meant by bubbling, a good point to starts is here. you can use event.stopPropagation(), if you don't want that event should propagate further.

Also a good link to refer on MDN

edited May 23 '17 at 11:47

Community

1
1

answered Dec 20 '12 at 07:00

Pranav

8,563
4
26
42

Child element click event trigger the parent click event

5 Answers5

Linked

Related