Vue directive to react on clicks outside an element


Vue directive to react on clicks outside an element without stopping the event propagation.
Great for closing dialogues and menus among other things.
``bash`
$ npm install --save v-click-outside
`bash`
$ yarn add v-click-outside
`js
import Vue from 'vue'
import vClickOutside from 'v-click-outside'
Vue.use(vClickOutside)
`
`js
`
Or use it as a directive
`js
import vClickOutside from 'v-click-outside'
`
Or use directive‘s hooks programmatically
`vue`
`vue`
Transparently bound v-click-outside directive via slotScope
See #220 for details or check-out this demo

To our knowledge, there isn't an idiomatic way to detect a click on a
As with any workaround, this also has its caveats:
- Click outside will be triggered once on iframe. Subsequent clicks on iframe will not execute the handler until focus has been moved back to main window — as in by clicking anywhere outside the iframe. This is the "expected" behavior since, as mentioned before, by clicking the iframe focus will move to iframe contents — a different window, so subsequent clicks are inside its frame. There might be way to workaround this such as calling window.focus() at the end of the provided handler but that will break normal tab/focus flow;
- Moving focus to iframe via keyboard navigation also triggers window.blur consequently the handler - no workaround found ATM;
Because of these reasons, the detection mechanism is behind the detectIframe flag that you can optionally set to false if you find it conflicting with your use-case.
Any improvements or suggestions to this are welcomed.
The notouch modifier is no longer supported, same functionality can be achieved using a middleware function
The HTML el` is not sent in the handler function argument any more. Review this issue for more details.