jquery stop child triggering parent event

Question

I have a div which I have attached an onclick event to   in this div there is a tag with a link  When I click the link the onclick event from the div is also triggered  How can i disable this so that if the link is clicked on the div onclick is not fired   script     document  ready function            header   bind  click   function               this  children   children   toggle                 html code    lt div class  header  gt       lt a href  link html  gt some link lt  a gt       lt ul class  children  gt           lt li gt some list lt  li gt       lt  ul gt   lt  div gt

User · Answer

Better way by using on   with chaining like     document  ready function            header   on  click  function              this  children   children   toggle           on  click   a  function e            e stopPropagation

User · Answer

I stumbled upon this question  looking for another answer   I wanted to prevent all children from triggering the parent   JavaScript   document getElementById  parent   addEventListener  click    function  e        if  this     event target  return         Do something       jQuery       parent   click function             Do something    children   on  click   function  e        e stopPropagation

User · Answer

Do this     document  ready function            header   click function              this  children   children   toggle                   header a   click function e            e stopPropagation                 If you want to read more on  stopPropagation    look here

User · Answer

Or this     document  ready function            header   click function              this  children   children   toggle                   header a   click function e            return false

User · Answer

The simplest solution is to add this CSS to the children    your-child       pointer-events  none

User · Answer

The answers here took the OP s question too literally  How can these answers be expanded into a scenario where there are MANY child elements  not just a single  lt a gt  tag  Here s one way   Let s say you have a photo gallery with a blacked out background and the photos centered in the browser  When you click the black background  but not anything inside of it  you want the overlay to close   Here s some possible HTML    lt div class  gallery  style  background  black  gt       lt div class  contents  gt   lt  -- Let s say this div is 50  wide and centered -- gt           lt h1 gt Awesome Photos lt  h1 gt           lt img src  img1 jpg  gt  lt br gt           lt img src  img2 jpg  gt  lt br gt           lt img src  img3 jpg  gt  lt br gt           lt img src  img4 jpg  gt  lt br gt           lt img src  img5 jpg  gt       lt  div gt   lt  div gt    And here s how the JavaScript would work       gallery   click      function                   this  hide                  gallery  gt   contents   click      function e            e stopPropagation               This will stop the click events from elements inside  contents from every research  gallery so the gallery will close only when you click in the faded black background area  but not when you click in the content area  This can be applied to many different scenarios

User · Answer

Or  rather than having an extra event handler to prevent another handler  you can use the Event Object argument passed to your click event handler to determine whether a child was clicked  target will be the clicked element and currentTarget will be the  header div       header   click function e          Do nothing if  header was not directly clicked      if e target     e currentTarget  return          this  children   children   toggle

[jquery] jquery stop child triggering parent event

Examples related to jquery