Detect click outside element

Question

How can I detect a click outside my element  I m using Vue js so it s gonna be outside my templates element  I know how to do it in Vanilla JS  but I m not sure if there s a more proper way to do it  when I m using Vue js   This is the solution for Vanilla JS  Javascript Detect Click event outside of div  I guess I can use a better way to access the element

User · Answer

You can create new component which handle outside click

Vue.component('click-outside', {
  created: function () {
    document.body.addEventListener('click', (e) => {
       if (!this.$el.contains(e.target)) {
            this.$emit('clickOutside');
           
        })
  },
  template: `
    <template>
        <div>
            <slot/>
        </div>
    </template>
`
})

And use this component:

<template>
    <click-outside @clickOutside="console.log('Click outside Worked!')">
      <div> Your code...</div>
    </click-outside>
</template>

User · Answer

The short answer  This should be done with Custom Directives    There are a lot of great answers here that also say this  but most of the answers I have seen break down when you start using outside-click extensively  especially layered or with multiple excludes   I have written an article on medium talking about the nuances of Custom Directives and specifically implementation of this one  It may not cover all edge cases but it has covered everything I have thought up   This will account for multiple bindings  multiple levels of other element exclusions and allow your handler to only manage the  business logic      Here s the code for at least the definition portion of it  check out the article for full explanation   var handleOutsideClick    const OutsideClick          this directive is run on the bind and unbind hooks   bind  el  binding  vnode           Define the function to be called on click  filter the excludes and call the handler     handleOutsideClick el id    e   gt          e stopPropagation            extract the handler and exclude from the binding value       const   handler  exclude     binding value          set variable to keep track of if the clicked element is in the exclude list       let clickedOnExcludedEl   false          if the target element has no classes  it won t be in the exclude list skip the check       if  e target  prevClass     undefined               for each exclude name check if it matches any of the target element s classes         for  const className of exclude              clickedOnExcludedEl   e target  prevClass includes className            if  clickedOnExcludedEl                break    once we have found one match  stop looking                                        don t call the handler if our directive element contains the target element          or if the element was in the exclude list       if    el contains e target     clickedOnExcludedEl             handler                        Register our outsideClick handler on the click touchstart listeners     document addEventListener  click   handleOutsideClick el id       document addEventListener  touchstart   handleOutsideClick el id       document onkeydown   e   gt            this is an option but may not work right with multiple handlers       if  e keyCode     27               TODO  there are minor issues when escape is clicked right after open keeping the old target         handleOutsideClick el id  e                       unbind             If the element that has v-outside-click is removed  unbind it from listeners     document removeEventListener  click   handleOutsideClick el id       document removeEventListener  touchstart   handleOutsideClick el id       document onkeydown   null   Note that this may not work with multiple listeners       export default OutsideClick

User · Answer

Add tabindex attribute to your component so that it can be focused and do the following    lt template gt       lt div          focus  handleFocus           focusout  handleFocusOut          tabindex  0       gt        SOME CONTENT HERE      lt  div gt   lt  template gt    lt script gt  export default           methods            handleFocus                    do something here                    handleFocusOut                    do something here                    lt  script gt

User · Answer

Vue 3 has breaking changes in directives  all of  lt Vue3 methods were changed updated  If you wonder  how to do it in Vue 3  Here s the snippet  For information please go through this link  lt div v-click-outside  quot methodToInvoke quot  gt  lt  div gt  click-outside js export default     beforeMount  function  el  binding  vnode        binding event   function  event          if    el     event target    el contains event target              if  binding value instanceof Function              binding value event                              document body addEventListener  click   binding event         unmounted  function  el  binding  vnode        document body removeEventListener  click   binding event         and In main js add the following    Directives import ClickOutside from    click-outside   createApp App    directive  click-outside   ClickOutside    use IfAnyModules    mount   app

User · Answer

lt button      class  dropdown       click prevent  toggle      ref  toggle       class    is-active   isActiveEl      gt      Click me    lt  button gt     data        return        isActiveEl  false              created         window addEventListener  click   this close          beforeDestroy         window removeEventListener  click   this close          methods        toggle  function           this isActiveEl    this isActiveEl             close e          if   this  refs toggle contains e target             this isActiveEl   false

User · Answer

If you have a component with multiple elements inside of the root element you can use this It just works    solution with a boolean    lt template gt     lt div  click  clickInside  gt  lt  div gt   lt template gt     lt script gt  export default     name   MyComponent     methods        clickInside           this inside   true        setTimeout      gt   this inside   false   0              clickOutside           if  this inside  return           handle outside state from here              created         this   handlerRef     this clickOutside bind this       document body addEventListener  click   this   handlerRef            destroyed         document body removeEventListener  click   this   handlerRef              lt  script gt

User · Answer

I have a solution for handling toggle dropdown menu   export default   data       return       dropdownOpen  false         methods          showDropdown             console log  clicked              this dropdownOpen    this dropdownOpen            this will control show or hide the menu           document  one  click status    e   gt              this dropdownOpen   false

User · Answer

Denis Danilenko solutions works for me  here s what I did  By the way I m using VueJS CLI3 and NuxtJS here and with Bootstrap4  but it will work on VueJS without NuxtJS also    lt div     class  dropdown ml-auto       class  showDropdown   null    show   gt       lt a          href              class  nav-link           role  button           id  dropdownMenuLink           data-toggle  dropdown           aria-haspopup  true           aria-expanded  false           click  showDropdown    showDropdown           blur  unfocused  gt           lt i class  fas fa-bars  gt  lt  i gt       lt  a gt       lt div          class  dropdown-menu dropdown-menu-right           aria-labelledby  dropdownMenuLink           class  showDropdown   null    show   gt           lt nuxt-link class  dropdown-item  to   contact  gt Contact lt  nuxt-link gt           lt nuxt-link class  dropdown-item  to   faq  gt FAQ lt  nuxt-link gt       lt  div gt   lt  div gt    export default       data             return               showDropdown  true                      methods        unfocused             this showDropdown    this showDropdown

User · Answer

Don t reinvent the wheel  use this package v-click-outside

User · Answer

Complete case for vue 3 This is a complete solution based on MadisonTrash answer  and benrwb and fredrivett tweaks for safari compatibility and vue 3 api changes  Edit  The solution proposed below is still useful  and the how to use is still valid  but I changed it to use document elementsFromPoint instead of event contains because it doesn t recognise as children some elements like the  lt path gt  tags inside svgs  So the right directive is this one  export default       beforeMount   el  binding    gt            el eventSetDrag        gt                el setAttribute  quot data-dragging quot    quot yes quot                       el eventClearDrag        gt                el removeAttribute  quot data-dragging quot                       el eventOnClick   event   gt                const dragging   el getAttribute  quot data-dragging quot                   Check that the click was outside the el and its children  and wasn t a drag             console log document elementsFromPoint event clientX  event clientY               if   document elementsFromPoint event clientX  event clientY  includes el   amp  amp   dragging                       call method provided in attribute value                 binding value event                                    document addEventListener  quot touchstart quot   el eventClearDrag           document addEventListener  quot touchmove quot   el eventSetDrag           document addEventListener  quot click quot   el eventOnClick           document addEventListener  quot touchend quot   el eventOnClick              unmounted  el   gt            document removeEventListener  quot touchstart quot   el eventClearDrag           document removeEventListener  quot touchmove quot   el eventSetDrag           document removeEventListener  quot click quot   el eventOnClick           document removeEventListener  quot touchend quot   el eventOnClick           el removeAttribute  quot data-dragging quot               Old answer  Directive const clickOutside         beforeMount   el  binding    gt            el eventSetDrag        gt                el setAttribute  quot data-dragging quot    quot yes quot                       el eventClearDrag        gt                el removeAttribute  quot data-dragging quot                       el eventOnClick   event   gt                const dragging   el getAttribute  quot data-dragging quot                     Check that the click was outside the el and its children  and wasn t a drag             if    el    event target    el contains event target    amp  amp   dragging                       call method provided in attribute value                 binding value event                                    document addEventListener  quot touchstart quot   el eventClearDrag           document addEventListener  quot touchmove quot   el eventSetDrag           document addEventListener  quot click quot   el eventOnClick           document addEventListener  quot touchend quot   el eventOnClick              unmounted  el   gt            document removeEventListener  quot touchstart quot   el eventClearDrag           document removeEventListener  quot touchmove quot   el eventSetDrag           document removeEventListener  quot click quot   el eventOnClick           document removeEventListener  quot touchend quot   el eventOnClick           el removeAttribute  quot data-dragging quot              createApp App     directive  quot click-outside quot   clickOutside     mount  quot  app quot      This solution watch the element and the element s children of the component where the directive is applied to check if the event target element is also a child  If that s the case it will not trigger  because it s inside the component  How to use it You only have to use as any directive  with a method reference to handle the trigger   lt template gt       lt div v-click-outside  quot myMethod quot  gt           lt div class  quot handle quot   click  quot doAnotherThing  event  quot  gt               lt div gt Any content lt  div gt           lt  div gt       lt  div gt   lt  template gt

User · Answer

Just if anyone is looking how to hide modal when clicking outside the modal  Since modal usually has its wrapper with class of modal-wrap or anything you named it  you can put  click  closeModal  on the wrapper  Using event handling stated in vuejs documentation  you can check if the clicked target is either on the wrapper or on the modal    x000D   x000D  methods    x000D    closeModal e    x000D      this event   function event    x000D        if  event target className     modal-wrap     x000D             close modal here x000D          this  store commit  catalog hideModal    x000D          document body removeEventListener  click   this event   x000D          x000D        bind this   x000D      document body addEventListener  click   this event   x000D       x000D    x000D   lt div class  modal-wrap   click  closeModal  gt  x000D     lt div class  modal  gt  x000D          x000D     lt  div gt  x000D   lt div gt  x000D   x000D   x000D

User · Answer

If you re specifically looking for a click outside the element but still within the parent  you can use  lt div class  quot parent quot   click self  quot onParentClick quot  gt     lt div class  quot child quot  gt  lt  div gt   lt  div gt   I use this for modals

User · Answer

I create a div at the end of the body like that    lt div v-if  isPopup  class  outside  v-on click  away    gt  lt  div gt    Where  outside is     outside     width  100vw    height  100vh    position  fixed    top  0px    left  0px      And away   is a method in Vue instance    away      this isPopup   false      Easy  works well

User · Answer

For Vue 3  This answer is based on MadisonTrash s great answer above but updated to use new Vue 3 syntax  Vue 3 now uses beforeMount instead of bind  and unmounted instead of unbind  src   const clickOutside       beforeMount   el  binding    gt        el clickOutsideEvent   event   gt             here I check that click was outside the el and his children       if    el    event target    el contains event target                 and if it did  call method provided in attribute value         binding value                       document addEventListener  quot click quot   el clickOutsideEvent          unmounted  el   gt        document removeEventListener  quot click quot   el clickOutsideEvent            createApp App     directive  quot click-outside quot   clickOutside     mount  quot  app quot

User · Answer

export default     bind  function  el  binding  vNode           Provided expression must evaluate to a function      if  typeof binding value      function           const compName   vNode context name       let warn     Vue-click-outside   provided expression    binding expression   is not a function  but has to be        if  compName    warn     Found in component    compName             console warn warn               Define Handler and cache it on the element     const bubble   binding modifiers bubble     const handler    e    gt          if  bubble      el contains e target   amp  amp  el     e target             binding value e                    el   vueClickOutside     handler         add Event Listeners     document addEventListener  click   handler          unbind  function  el  binding           Remove Event Listeners     document removeEventListener  click   el   vueClickOutside        el   vueClickOutside     null

User · Answer

I m not sure if someone will ever see this answer but here it is  The idea here is to simply detect if any click was done outside the element itself  I first start by giving an id to the main div of my  quot dropdown quot    lt template gt     lt div class  quot relative quot  id  quot dropdown quot  gt       lt div  click  quot openDropdown    openDropdown quot  class  quot cursor-pointer quot  gt         lt slot name  quot trigger quot    gt       lt  div gt        lt div       class  quot absolute mt-2 w-48 origin-top-right right-0 text-red  bg-tertiary text-sm text-black quot        v-show  quot openDropdown quot         click  quot openDropdown   false quot       gt         lt slot name  quot content quot    gt       lt  div gt     lt  div gt   lt  template gt   And then I just loop thru the path of the mouse event and see if the div with my id  quot dropdown quot  is there  If it is  then we good  if it is no  then we close the dropdown   lt script gt  export default     data         return         openDropdown  false                created         document addEventListener  quot click quot    e    gt          let me   false        for  let index   0  index  lt  e path length  index              const element   e path index            if  element id     quot dropdown quot               me   true            return                           if   me  this openDropdown   false                  lt  script gt   I m pretty sure this can bring performance issues if you have many nested elements  but I found this as the most lazy-friendly way of doing it

User · Answer

Use this package vue-click-outside  It s simple and reliable  currently used by many other packages  You can also reduce your javascript bundle size by calling the package only in the required components  see example below    npm install vue-click-outside  Usage     lt template gt     lt div gt       lt div v-click-outside  hide   click  toggle  gt Toggle lt  div gt       lt div v-show  opened  gt Popup item lt  div gt     lt  div gt   lt  template gt    lt script gt  import ClickOutside from  vue-click-outside   export default     data          return         opened  false               methods        toggle            this opened   true             hide            this opened   false               mounted             prevent click outside event with popupItem      this popupItem   this  el            do not forget this section   directives        ClickOutside        lt  script gt

User · Answer

I am using this package   https   www npmjs com package vue-click-outside  It works fine for me  HTML     lt div class    card-content  v-click-outside  hide  v-if  cardContentVisible  gt       lt div class  card-header  gt           lt input class  subject-input  placeholder  Subject  name     gt       lt  div gt       lt div class  card-body  gt           lt textarea class  conversation-textarea  placeholder  Start a conversation  gt  lt  textarea gt       lt  div gt   lt  div gt    My script codes    import ClickOutside from  vue-click-outside  export default       data            return               cardContentVisible false                      created                    methods                        openCardContent                                 this cardContentVisible   true                 hide                  this cardContentVisible   false                                  directives                ClickOutside

User · Answer

Can be solved nicely by setting up a custom directive once   Vue directive  click-outside       bind            this event   event   gt  this vm  emit this expression  event        this el addEventListener  click   this stopProp        document body addEventListener  click   this event            unbind         this el removeEventListener  click   this stopProp      document body removeEventListener  click   this event          stopProp event    event stopPropagation          Usage    lt div v-click-outside  nameOfCustomEventToCall  gt    Some content  lt  div gt    In the component   events      nameOfCustomEventToCall  function  event           do something - probably hide the dropdown menu   modal etc          Working Demo on JSFiddle with additional info about caveats   https   jsfiddle net Linusborg yzm8t8jq

User · Answer

There are two packages available in the community for this task  both are maintained     https   github com simplesmiler vue-clickaway https   github com ndelvalle v-click-outside

User · Answer

There is the solution I used  which is based on Linus Borg answer and works fine with vue js 2 0  Vue directive  click-outside       bind  function  el  binding  vnode        el clickOutsideEvent   function  event             here I check that click was outside the el and his children       if    el    event target    el contains event target                 and if it did  call method provided in attribute value         vnode context binding expression  event                      document body addEventListener  click   el clickOutsideEvent         unbind  function  el        document body removeEventListener  click   el clickOutsideEvent            You bind to it using v-click-outside   lt div v-click-outside  quot doStuff quot  gt   Here s a small demo You can find some more info about custom directives and what el  binding  vnode means in https   vuejs org v2 guide custom-directive html Directive-Hook-Arguments

User · Answer

I did it a slightly different way using a function within created      created           window addEventListener  click    e    gt            if   this  el contains e target              this showMobileNav   false                          This way  if someone clicks outside of the element  then in my case  the mobile nav is hidden  Hope this helps

User · Answer

You can register two event listeners for click event like this   document getElementById  some-area            addEventListener  click   function e           alert  You clicked on the area             e stopPropagation      this will stop propagation of this event to upper level            document body addEventListener  click       function e               alert  You clicked outside the area

User · Answer

I use this code   show-hide button    lt a  click stop  visualSwitch    gt  show hide  lt  a gt    show-hide element   lt div class  dialog-popup  v-if  visualState   click stop    gt  lt  div gt    script  data      return       visualState  false      methods        visualSwitch             this visualState    this visualState          if  this visualState              document addEventListener  click   this visualState           else             document removeEventListener  click   this visualState               Update  remove watch  add stop propagation

User · Answer

I have combined all answers  including a line from vue-clickaway  and came up with this solution that works for me   Vue directive  click-outside         bind el  binding  vnode            var vm   vnode context          var callback   binding value           el clickOutsideEvent   function  event                if    el    event target    el contains event target                      return callback call vm  event                                    document body addEventListener  click   el clickOutsideEvent              unbind el            document body removeEventListener  click   el clickOutsideEvent               Use in component    lt li v-click-outside  closeSearch  gt     lt  -- your component here -- gt   lt  li gt

User · Answer

You can emit custom native javascript event from a directive  Create a directive that dispatches an event from the node  using node dispatchEvent  let handleOutsideClick  Vue directive  out-click         bind  el  binding  vnode             handleOutsideClick    e    gt                e stopPropagation               const handler   binding value              if  el contains e target                     el dispatchEvent new Event  out-click     lt -- HERE                                  document addEventListener  click   handleOutsideClick          document addEventListener  touchstart   handleOutsideClick             unbind              document removeEventListener  click   handleOutsideClick          document removeEventListener  touchstart   handleOutsideClick             Which can be used like this  h3  v-out-click  click   emit  show     out-click   emit  hide

User · Answer

I hate additional functions so    here is an awesome vue solution without an additional vue methods  only var   create html element  set controls and directive        lt p  click  popup    popup  v-out  popup  gt        lt div v-if  popup  gt         My awesome popup      lt  div gt     create a var in data like   data      popup  false       add vue directive  its   Vue directive  out          bind  function  el  binding  vNode            const handler    e    gt                if   el contains e target   amp  amp  el     e target                      and here is you toggle var  thats it                 vNode context binding expression    false                                 el out   handler         document addEventListener  click   handler              unbind  function  el  binding            document removeEventListener  click   el out          el out   null

User · Answer

This Worked for me with Vue js 2 5 2           Call a function when a click is detected outside of the    current DOM node   AND its children         Example          lt template gt        lt div v-click-outside  onClickOutside  gt Hello lt  div gt      lt  template gt         lt script gt     import clickOutside from              directives clickOutside     export default        directives           clickOutside              data             return            showDatePicker  false                       methods           onClickOutside  event             this showDatePicker   false                          lt  script gt      export default     bind  function  el  binding  vNode        el   vueClickOutside     event   gt          if   el contains event target                call method provided in v-click-outside value         vNode context binding expression  event          event stopPropagation                     document body addEventListener  click   el   vueClickOutside           unbind  function  el  binding  vNode           Remove Event Listeners     document removeEventListener  click   el   vueClickOutside        el   vueClickOutside     null

User · Answer

I have updated MadisonTrash s answer to support Mobile Safari  which does not have click event  touchend must be used instead   This also incorporates a check so that the event isn t triggered by dragging on mobile devices   Vue directive  click-outside         bind  function  el  binding  vnode            el eventSetDrag   function                  el setAttribute  data-dragging    yes                      el eventClearDrag   function                  el removeAttribute  data-dragging                      el eventOnClick   function  event                var dragging   el getAttribute  data-dragging                   Check that the click was outside the el and its children  and wasn t a drag             if    el    event target    el contains event target    amp  amp   dragging                       call method provided in attribute value                 vnode context binding expression  event                                    document addEventListener  touchstart   el eventClearDrag           document addEventListener  touchmove   el eventSetDrag           document addEventListener  click   el eventOnClick           document addEventListener  touchend   el eventOnClick          unbind  function  el            document removeEventListener  touchstart   el eventClearDrag           document removeEventListener  touchmove   el eventSetDrag           document removeEventListener  click   el eventOnClick           document removeEventListener  touchend   el eventOnClick           el removeAttribute  data-dragging

User · Answer

frequently people want to know if user leave root component  works with any level components    x000D   x000D  Vue   x000D    data      x000D    methods    x000D      unfocused   function     x000D        alert  good bye    x000D        x000D      x000D     x000D   lt template gt  x000D     lt div tabindex  1   blur  unfocused  gt Content inside lt  div gt  x000D   lt  template gt  x000D   x000D   x000D

User · Answer

There are already many answers to this question  and most of them are based on the similar custom directive idea  The problem with this approach is that one have to pass a method function to the directive  and cannot directly write code as in other events  I created a new package vue-on-clickout that is different  Check it out at   https   github com MuTsunTsai vue-on-clickout  It allows one to write v-on clickout just like any other events  For example  you can write  lt div v-on clickout  quot myField value quot  v-on click  quot myField otherValue quot  gt     lt  div gt   and it works  Update vue-on-clickout now supports Vue 3  Update 2 vue-on-clickout is now replaced by a new package Clickout-Event which works for any front-end framework  or vanilla

[javascript] Detect click outside element

Examples related to javascript

Examples related to vue.js