jQuery click function exclude children

Question

Trying to wrap my head around the jQuery   not    function  and running into a problem  I would like to have the parent div to be  clickable  but if a user clicks on a child element  the script is not called     this  not children    click function           example   fadeOut  fast          the html    lt div class  example  gt      lt div gt         lt p gt This content is not affected by clicks  lt  p gt      lt  div gt   lt  div gt

User · Answer

I personally would add a click handler to the child element that did nothing but stop the propagation of the click  So it would look something like       example  gt  div   click function  e        e stopPropagation

User · Answer

My solution   jQuery   foo   on  click  function event       if    jQuery event target  is   foo                    code goes here

User · Answer

I m using following markup and had encoutered the same problem    lt ul class  nav  gt       lt li gt  lt a href  abc html  gt abc lt  a gt  lt  li gt       lt li gt  lt a href  def html  gt def lt  a gt  lt  li gt   lt  ul gt    Here I have used the following logic       nav  gt  li   click function e       if e target    this  return     only continue if the target itself has been clicked        this section only processes if the  nav  gt  li itself is clicked      alert  you clicked  nav  gt  li  but not it s children          In terms of the exact question  I can see that working as follows       example   click function e      if e target    this  return     only continue if the target itself has been clicked        example   fadeOut  fast          or of course the other way around       example   click function e      if e target    this      only if the target itself has been clicked            example   fadeOut  fast               Hope that helps

User · Answer

Here is an example  Green square is parent and yellow square is child element   Hope that this helps        x000D   x000D  var childElementClicked  x000D   x000D      parentElement   click function    x000D   x000D        childElement   click function    x000D       childElementClicked   true  x000D        x000D   x000D    if  childElementClicked    true     x000D   x000D        It is clicked on parent but not on child  x000D           Now do some action that you want  x000D        alert  Clicked on parent    x000D      x000D     else  x000D        alert  Clicked on child    x000D        x000D       x000D      childElementClicked   false  x000D    x000D      x000D   parentElement  x000D  width 200px  x000D  height 200px  x000D  background-color green  x000D  position relative  x000D    x000D   x000D   childElement  x000D  margin-top 50px  x000D  margin-left 50px  x000D  width 100px  x000D  height 100px  x000D  background-color yellow  x000D  position absolute  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div id  parentElement  gt  x000D     lt div id  childElement  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Or you can do also       example   on  click   function e        if  e target    this           return false

User · Answer

To do this  stop the click on the child using  stopPropagation       example   click function        this  fadeOut  fast       children   click function e      return false        This will stop the child clicks from bubbling up past their level so the parent won t receive the click    not   is used a bit differently  it filters elements out of your selector  for example    lt div class  bob  id  myID  gt  lt  div gt   lt div class  bob  gt  lt  div gt       bob   not   myID      removes the element with myID   For clicking  your problem is that the click on a child bubbles up to the parent  not that you ve inadvertently attached a click handler to the child

[jquery] jQuery: click function exclude children.

Examples related to jquery