Child element click event trigger the parent click event

Question

Say you have some code like this    lt html gt   lt head gt   lt  head gt   lt body gt      lt div id  parentDiv  onclick  alert  parentDiv     gt          lt div id  childDiv  onclick  alert  childDiv     gt          lt  div gt          lt  div gt   lt  body gt   lt  html gt     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

User · Answer

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

User · Answer

Without jQuery   DEMO    lt div id  parentDiv  onclick  alert  parentDiv     gt      lt div id  childDiv  onclick  alert  childDiv   event cancelBubble true   gt       AAA     lt  div gt      lt  div gt

User · Answer

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

User · Answer

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

User · Answer

I faced the same problem and solve it by this method   html     lt div id  parentDiv  gt      lt div id  childDiv  gt       AAA     lt  div gt      BBBB  lt  div gt    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

[javascript] Child element click event trigger the parent click event

Examples related to javascript

Examples related to jquery

Examples related to dhtml