Detecting Click Outside Of A DOM Element – when-clicked-outside

Preview:

Description:

when-clicked-outside is a pure JavaScript library which detects and execute a callback function when clicking outside of a specific DOM element.

How to use it:

Install the when-clicked-outside and import it into your project.

# Yarn
$ yarn add @lukeboyle/when-clicked-outside
# NPM
$ npm install @lukeboyle/when-clicked-outside

import whenClickedOutside from '@lukeboyle/when-clicked-outside';

Or include the compiled JavaScript file ‘when-clicked-outside.js’ on the web page.

<script src="when-clicked-outside.js"></script>

Initialize the whenClickedOutside and specify the DOM element you want to keep track of the click events.

<div id="element">
  ...
</div>

whenClickedOutside('#element', whenClickedOutsideCallback);

Execute a function as you click outside of the element.

function whenClickedOutsideCallback(event) {
  alert('outside');
}

Changelog:

09/05/2020

• refactor: convert to ts

09/11/2018

• Refactor