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:

// Add a clickout listener
$('button').on('clickout', function (e) {
  console.log('click outside button')
})
 
// Remove a clickout listener
$('button').off('clickout')

The coolest feature is the multiple elements support:

$('.js-button, .js-menu').on('clickout', function (e) {
  console.log('click outside `js-button` and `js-menu`')
  this.addClass('is-hidden') // now both $button and $menu have `is-hidden` class
})
 
 
$button.add($menu).on('clickout', function () {
  console.log('click outside `js-button` and `js-menu`')
  this.addClass('is-hidden') // now both $button and $menu have `is-hidden` class
})

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:

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