jquery-clickout
v0.0.3
Published
Handle clickout events with jQuery
Downloads
145
Maintainers
Readme
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`
})