jQuery trigger event when click outside the element

Question

document  click function evt        var target   evt currentTarget      var inside       menuWraper        if  target    inside            alert  bleep                 I am trying to figure out how to make it so that if a user clicks outside of a certain div  menuWraper   it triggers an event   I realized I can just make every click fire an event  then check if the clicked currentTarget is same as the object selected from     menuWraper    However  this doesn t work  currentTarget is HTML object    and     menuWraper   is Object object  I am very confused

User · Answer

var visibleNotification   false     function open notification             if  visibleNotification    false                    notification-panel   css  visibility    visible                visibleNotification   true            else                   notification-panel   css  visibility    hidden                visibleNotification   false                         document  click function  evt            var target   evt target className          if target   fa fa-bell-o bell-notification                         var inside       fa fa-bell-o bell-notification                if    trim target                           if          target     inside                        if  visibleNotification    true                                notification-panel   css  visibility    hidden                            visibleNotification   false

User · Answer

I do not think document fires the click event  Try using the body element to capture the click event  Might need to check on that

User · Answer

function handler event     var target     event target    if   target is  div menuWraper        alert  outside             myPage   click handler

User · Answer

I know that the question has been answered  but I hope my solution helps other people   stopPropagation caused problems in my case  because I needed the click event for something else  Moreover  not every element should cause the div to be closed when clicked   My solution       document  click function e        if     e target  closest   mydiv   attr  id       mydiv    amp  amp            e target  closest   div-exception   attr  id       div-exception             alert  Clicked outside                 http   jsfiddle net NLDu3

User · Answer

try these      document  click function evt        var target   evt target className      var inside       menuWraper          alert   target  html         if    trim target                   if          target     inside                alert  bleep

User · Answer

Just have your menuWraper element call event stopPropagation   so that its click event doesn t bubble up to the document   Try it out  http   jsfiddle net Py7Mu     document  click function         alert  clicked outside             menuWraper   click function event        alert  clicked inside        event stopPropagation           http   api jquery com event stopPropagation    Alternatively  you could return false  instead of using event stopPropagation

User · Answer

The most common application here is closing on clicking the document but not when it came from within that element  for this you want to stop the bubbling  like this       menuWrapper   click function e      e stopPropagation      stops click event from reaching document       document  click function           menuWrapper   hide      click came from somewhere else       All were doing here is preventing the click from bubbling up  via event stopPrpagation    when it came from within a  menuWrapper element   If this didn t happen  the click came from somewhere else  and will by default make it s way up to document  if it gets there  we hide those  menuWrapper elements

User · Answer

if you have child elements like dropdown menus     html   click function e        if clicked element is not your element and parents aren t your div   if  e target id     your-div-id   amp  amp    e target  parents   your-div-id   length    0          do stuff

User · Answer

document  click  e    gt      if    contains     the-one-you-can-click-and-should-still-open   get 0   e target         else       this onClose

User · Answer

try this one        document  click function event             if event target id      xxx                return false          else                    do some this here

User · Answer

This code will open the menu in question  and will setup a click listener event  When triggered it will loop through the target id s parents until it finds the menu id  If it doesn t  it will hide the menu because the user has clicked outside the menu  I ve tested it and it works   function tog alerts       if     Element   css  display       none               Element   show           setTimeout function                 document body addEventListener  click   Close Alerts  false             500           function Close Alerts e      var current   e target     var check   0     while  current parentNode         current   current parentNode       if current id     Element             check   1                  if check    0         document body removeEventListener  click   Close Alerts  false             Element   hide

[javascript] jQuery trigger event when click outside the element

Examples related to javascript

Examples related to jquery