Skip to content
/ outclick Public

A library used to detect click events outside a specific element

License

Notifications You must be signed in to change notification settings

shade/outclick

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

outclick 👉

code style : standard

A library used to detect DOM clicks outside specific elements, useful for closing menus

Example use .gif

Warning

If you don't specifiy otherwise, this library will alter the addEventListener and removeEventListener properties. This should be okay for most cases but may lead to complications with other libraries.

Installation

You can download the latest release or install it as an npm package

npm install --save outclick

Basic Usage

Using outclick you can register event listeners on DOM elements to detect whether another element that was that element or another element inside it was clicked. The most common use of this is in menus.

var menu = document.getElementById('menu')

menu.onoutclick = function () {
	hide(menu)
}

this can also be done using the addEventListener method

var menu = document.getElementById('menu')

menu.addEventListener('outclick', function (e) {
	hide(menu)
})

the exceptions parameter, is an array of elements that are an exception to the outclick event.

var menu = document.getElementById('menu')
var exceptions = [
 document.getElementById('menuBtn'),
 document.getElementById('dontCloseTheMenu')
]

menu.addEventListener('outclick', function (e) {
	hide(menu)
}, exceptions)

removing a listener is the same, however we've modified addEventListener to return the listening function to make it easier for you e.g.

var menu = document.getElementById('menu')

var menuFunc = menu.addEventListener('outclick', function (e) {
	hide(menu)
})

menu.removeEventListener('outclick', menuFunc)

Alternatively, you can also use the html attribute outclick to trigger an event. This does not handle dynamic HTML, and we have no plans to add that, yet

<div outclick="someFunc()"></div>

Defined Methods and Attributes

Node.addEventListener('outclick', listener, exceptions)

This is like the normal addEventListener except it works for an outclick event

listener - the function to be executed on an outclick

exceptions - the exceptions to the outclick event, the current node is automatically one

Node.removeEventListener('outclick', listener)

This is like the normal removeEventListener except it works for the outclick events

listener - the function to be executed on an outclick

About

A library used to detect click events outside a specific element

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published