Document Click Listener

Easily catch outside of element clicks with enable/disable functionality.

This javascript module especially useful if you have multiple UI elements that needs to track where user clicked in the terms of inside/outside of itself.

Install

npm install document-click-listener

Import

This package exports multiple builds. Developer has the responsibility to choose the one that best fits to her/his needs.

1. Minified (default)

This is basically the source code itself but minified. There are no compilation and polyfills inside. Use it if you already have a compiler (like babel) and polyfills in your project. (which is mostly is the case.)

// just 827 bytes
const documentClickListener = require('document-click-listener')

1. Polyfilled and minified

The source code compiled with babel (with the configuration that can be found inside babel.config.js file) and minified. This build contains also polyfills which increases the size of the package dramatically. Polyfills added by the configuration that can be found inside the .browserlistrc file.

const documentClickListener = require('document-click-listener/dist/polyfilled')

1. Bundle for browsers

The source code bundled with browserify to generate a UMD bundle. This bundle can be imported by html script tag. No compilation and polyfills. The variable attached to the browser's window object is DocumentClickListener.

<script src="https://unpkg.com/document-click-listener@0/dist/browser.js" crossorigin type="text/javascript"></script>

1. Polyfilled bundle for browsers

The source code compiled with babel and bundled with browserify to generate a UMD bundle. This bundle can be imported by html script tag. The variable attached to the browser's window object is DocumentClickListener.

<script src="https://unpkg.com/document-click-listener@0/dist/browser.polyfilled.js" crossorigin type="text/javascript"></script>

Use

Call listenOutsideClicks method where UI element needs to take action on outside click.

const documentClickListener = require('document-click-listener')
 
// example case: hiding dropdown menu if user clicks outside of it
const listenerID = 'dropdownMenu'
 
function getDOMs() {
  // tell module which dom element(s) this is about
  return [
    document.querySelector('.dropdown-menu-wrapper')
  ]
}
 
function onOutsideClick() {
  // triggered if user clicks outside of the .dropdown-menu-wrapper
  const menu = document.querySelector('.dropdown-menu-wrapper')
  menu.style.display = 'none'
  // also don't listen anymore since we hide the dropdown
  documentClickListener.disable(listenerID)
}
 
documentClickListener.listenOutsideClicks(listenerID, getDOMs, onOutsideClick)

Babel Polyfills Report

This module uses the following polyfills in its polyfilled builds.

1. es.array.filter
2. es.array.map
3. es.object.values