A simple, small (790 bytes) and easy to use function to detect if the user clicks outside an element.
npm install vanilla-click-outsideYou can also use the new ESM import syntax to directly use this lib in your browser without installing it via a package manager.
You can follow the below instructions or look into ./docs/index.html.
HTML
<head>
<script defer src="./path/to/vanilla-click-outside.umd.js"></script>
<!-- OR -->
<script
defer
src="https://unpkg.com/vanilla-click-outside/dist/vanilla-click-outside.umd.js"
></script>
</head>
<body>
<div id="target">
<section></section>
</div>
</body>const target = document.getElementById('target')
vanillaClickOutside(target, (type, event) => {
console.log(type, event)
})import vanillaClickOutside from 'vanilla-click-outside'
const target = document.getElementById('target')
vanillaClickOutside(target, (type, event) => {
console.log(type, event)
})<script type="module">
import vanillaClickOutside from './path/to/vanilla-click-outside.modern.js'
// OR
import vanillaClickOutside from 'https://unpkg.com/vanilla-click-outside/dist/vanilla-click-outside.modern.js'
vanillaClickOutside(target, (type, event) => {
console.log(type, event)
})
</script>| Option | Default | Type | Description |
|---|---|---|---|
removeListener |
true |
boolean | If you want to handle removeEventListener by yourself. |