vue-outside-events

Vue 2.x directive to react on events outside of an element without stopping the event's propagation. Works well for handling clicks outside of menus and popups. Can handle any DOM event or CustomEvent. Also able to capture jQuery events.

Install

```js npm install --save vue-outside-events ```

Demos

Check out the highly contrived demos here: https://nchutchind.github.io/vue-outside-events/docs/index.html

Use

Modular

```js import Vue from 'vue' import vOutsideEvents from 'vue-outside-events' Vue.use(vOutsideEvents) ``` ```html ```

Scripts

```html ```

Events

| Event | Event Name | Directive | Binding | | ------------------ | ----------- | -------------------- | ---------------------------------------------- | | Click | click | v-click-outside | ="handlerName" | | Double-Click | dblclick | v-dblclick-outside | ="handlerName" | | Focus | focusin | v-focus-outside | ="handlerName" | | Blur | focusout | v-blur-outside | ="handlerName" | | Mouse Over / Enter | mouseover | v-mouseover-outside | ="handlerName" | | Mouse Move | mousemove | v-mousemove-outside | ="handlerName" | | Mouse Up | mouseup | v-mouseup-outside | ="handlerName" | | Mouse Down | mousedown | v-mousedown-outside | ="handlerName" | | Mouse Out | mouseout | v-mouseout-outside | ="handlerName" | | Key Down | keydown | v-keydown-outside | ="handlerName" | | Key Up | keyup | v-keyup-outside | ="handlerName" | | Key Press | keypress | v-keypress-outside | ="handlerName" | | Change | change | v-change-outside | ="handlerName" | | Select | select | v-select-outside | ="handlerName" | | Submit | submit | v-submit-outside | ="handlerName" | | Custom | "eventName" | v-event-outside | ="{ name: 'eventName', handler: handlerName }" |

Extras

Add additional key/value pairs to the custom event to pass data to the event handler. ```html ``` ```js onFoo (e, el, extras) { console.log('onFoo'); console.log('fooEvent happened outside element:', el); console.log('element that triggered foo:', e.target); console.log('event:', e); console.log('extras:', extras); console.log('bar:', extras.bar); } ```

Modifiers

Add the jquery modifier to allow the directive to handle jQuery triggering of custom events. jQuery must be present in the window for this to work. ```html ```

License

MIT License

Style