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

Category: Javascript | October 22, 2016
Views Total:1,949 views
Official Page:Go to website
Last Update:October 22, 2016


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


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.


Reinit Event Listener.



You Might Be Interested In:

Leave a Reply