jQuery Clickout

jQuery plugin for handle outside clicks. It doesn't stop event propagation nor prevents default events.

It extends the jQuery Events and adds a new custom event: clickout.

You can use it normally with on and off methods:

1// Add a clickout listener
2$('button').on('clickout', function (e) {
3  console.log('click outside button')
4})
5
6// Remove a clickout listener
7$('button').off('clickout')

The coolest feature is the multiple elements support:

1$('.js-button, .js-menu').on('clickout', function (e) {
2  console.log('click outside `js-button` and `js-menu`')
3  this.addClass('is-hidden') // now both $button and $menu have `is-hidden` class
4})
5
6
7$button.add($menu).on('clickout', function () {
8  console.log('click outside `js-button` and `js-menu`')
9  this.addClass('is-hidden') // now both $button and $menu have `is-hidden` class
10})

Installation

npm install jquery-clickout --save

Or just copy jquery-clickout.min.js from this repository, in the dist folder.

Usage

Just use clickout like a normal event. Very very easy:

1$('.my-element').on('clickout', function (e) {
2  console.log('Outside element click')
3  console.log(this) // jQuery instance of `.my-element`
4})