Press "Enter" to skip to content

Detect Click Outside An Element Using Javascript | when-clicked-outside

Add a clicks listener to activate callback everywhere on the window except for the item you chose. Pure JavaScript library that detects and executes a callback function when you click on the outside(when-clicked-outside) of a particular DOM.

JS library, pass an element, and call this will start when you click anywhere other than the element.

detect click outside element, detect click outside div jquery, detect click outside element jquery, jquery click outside to close

How to make use of 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';

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

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

Initialize the when clicked outside and specify the DOM aspect you need to maintain monitor of the clicking events.

<div id="element">
  ...
</div>
whenClickedOutside('#element', whenClickedOutsideCallback);

Execute a function as you click on the exterior of the component.

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

Detecting Click Outside Of A DOM Element, When Clicked Outside Github


See Demo And Download

Official Website(3stacks): Click Here

This superior jQuery/javascript plugin is developed by 3stacks. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.