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` })
