Handling Click Outside Event In Pure JavaScript – click-outside.js

Preview:

Description:

click-outside.js is a pure JavaScript library that helps you handle click outside/inside events on a specific DOM element.

How to use it:

Import the minified verison of click-outside.js into the webpage when needed.

<script src="click-outside.min.js"></script>

Define the element.

var el = document.getElementById('target');
var outEl = document.getElementById('out');
var inEl = document.getElementById('in');

Make New Click Outside Event.

var myEvent = new onClickOutside(el, function() {
    console.log("You've Just Clicked Outside The Box!");
    outEl.style.display = "block"
    inEl.style.display = "none"
  })

Handle Click Inside.

function clickInside() {
  console.log("Clicked Inside");
  outEl.style.display = "none"
  inEl.style.display = "block"
}

Remove Event Listener.

myEvent.remove()

Reinit Event Listener.

myEvent.reinit()