How to have click event ONLY fire on parent DIV not children

Question

I have a DIV with a classed foobar  and a few DIVs inside that DIV that are unclassed  but I suppose they are inheriting the foobar class       foobar   on  click   function          do stuff            I want that to fire off only when clicking somewhere in the DIV but not on its children DIVs

User · Accepted Answer

If the e target is the same element as this  you ve not clicked on a descendant    x000D   x000D      foobar   on  click   function e    x000D    if  e target     this  x000D      return  x000D     x000D    alert   clicked the foobar     x000D      x000D   foobar   x000D    padding  20px  background  yellow  x000D    x000D  span   x000D    background  blue  color  white  padding  8px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt div class  foobar  gt   foobar  alert   x000D     lt span gt child  no alert  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use event currentTarget  It will do click event only elemnt who got event    x000D   x000D  target   e   gt    x000D      console log e currentTarget   x000D       x000D   lt ul onClick  target  className  folder  gt  x000D         lt li gt  x000D           lt p gt  x000D             lt i className  fas fa-folder    gt  x000D           lt  p gt  x000D         lt  li gt  x000D       lt  ul gt  x000D   x000D   x000D

User · Answer

bind  click  event handler to the   foobar  element s  to do work    then find the children of all the   foobar  element s    and bind a  click  event handler to them that stops the propagation of the event     foobar   on  click   function             children   on  click   function  event        event stopPropagation          you can also use  return false   which is the same as  event preventDefault    and  event stopPropagation    all in one  in a jQuery event handler        This will stop the propagation  bubbling  of the click event on any of the children element s  of the  foobar element s  so the event won t reach the  foobar element s  to fire their event handler s    Here is a demo  http   jsfiddle net bQQJP

User · Answer

My case is similar but this is occasion when you have few foobar-s  and you want to close only one - per one click   Find parent case      foobar-close-button-class   on  click   function            this  parents   foobar   fadeOut  100            this  - means that you finding some parent class from   foobar-close-button-class           parents  -means that you finding parent class with name   foobar        Find child case      foobar-close-button-class   on  click   function            this  child   foobar-close-button-child-class   fadeOut  100            this  - means that you finding some child class from   foobar-close-button-class           child  -means that you finding child class with name   foobar-close-button-child-class

User · Answer

I did not get the accepted answer to work  but this seems to do the trick  at least in vanilla JS   if e target     e currentTarget  return

User · Answer

advanced ul li   live  click  function e       if e target    this  return        code        this code will execute only when you click to li and not to a child

User · Answer

You can use bubbling in your favor       foobar   on  click   function e           do your thing     on  click    div   function e           clicked on descendant div     e stopPropagation

User · Answer

I had the same problem and came up with this solution  based on the other answers         newsletter background    click function e        if  e target    this                newsletter background   hide                 Basically it says if the target is the div then run the code otherwise do nothing  don t hide it

User · Answer

x000D   x000D     if its li get value  x000D  document getElementById  li   addEventListener  click   function e    x000D                  if  e target    this    x000D                      UodateNote e target id   x000D                    x000D                     x000D                   x000D                   x000D                  function UodateNote e    x000D   x000D      let nt id   document createElement  div    x000D         append container to duc  x000D      document body appendChild nt id   x000D      nt id id    hi   x000D         get conatiner value    x000D      nt id innerHTML   e  x000D         body    x000D      console log e   x000D   x000D    x000D  li  x000D   cursor  pointer  x000D      font-weight  bold  x000D    font-size  20px  x000D      position  relative  x000D      width  380px  x000D      height  80px  x000D      background-color  silver  x000D      justify-content  center  x000D      align-items  center  x000D      text-align  center  x000D      margin-top  0 5cm  x000D      border  2px solid purple  x000D      border-radius  12    x000D       x000D      p  x000D       cursor  text  x000D    font-size  16px  x000D     font-weight  normal  x000D      display  block  x000D      max-width  370px  x000D      max-height  40px  x000D      overflow-x  hidden   x000D   lt li id  li  gt  lt p gt hi lt  p gt  lt  li gt  x000D   x000D   x000D

User · Answer

If you can t use pointer-events  none  and are targeting modern browsers you can use composedPath to detect a direct click on the object like so   element addEventListener  click   function  ev        if  ev composedPath   0      this               your code here                You can read more about composedPath here  https   developer mozilla org en-US docs Web API Event composedPath

User · Answer

There s another way that works if you don t mind only targeting newer browsers  Just add the CSS  pointer-events  none    to any children of the div you want to capture the click  Here s the support tables  http   caniuse com  feat pointer-events

[jquery] How to have click event ONLY fire on parent DIV, not children?

Examples related to jquery

Examples related to events

Examples related to onclick