Provides universal support for
clickoutand other similar events to webpages.
There are many packages that are designed to capture and handle the "click outside" event of an element. Some of them target vanilla JavaScript, while some others target specific front-end framework, possibly specific version. Front-end designers in the past had to look for the right package that works for their particular scenario.
Look no further! Introducing Clickout-Event,
a package that provides universal support for clickout and other similar events.
It works in all scenarios: plain HTML onclickout attributes,
.addEventListener('clickout') of vanilla JavaScript,
.on('clickout') of jQuery, v-on:clickout directives of Vue.js, you name it.
As long as a front-end framework internally uses addEventListener to handle events,
Clickout-Event works for it.
MIT License
In order to fully implement all native event behaviors, Clickout-Event uses the mutation observer API, so it will not work directly for legacy browsers. You may try using polyfills to make it work, but I haven't tested those yet.
You can get Clickout-Event as an NPM package by running:
npm install clickout-event --saveOr, simply download clickout-event.js.
Then all you need to do is add the script tag anywhere (as long as it is before any calling of the addEventListener method) in your webpage :
<script src="clickout-event.js"></script>And watch the magic happen.
Clickout-Event provides the corresponding "out-events" for the following events: click, dblclick, mousedown, mouseup, touchstart and touchend. The corresponding events are then called clickout, dblclickout etc. You can then use them the same way you use any other events, such as:
<div onclickout="console.log('clickout detected')">...</div>document.getElementById('myId').addEventListener('clickout', myListener);$('#myId').on('clickout', myListener);<div v-on:clickout="open=false">...</div><div (clickout)="close()">...</div>You can have nested elements using the out-events. In that case,
unlike regular events, out-events fire in the top-down ordering;
that is, the parent element will fire the event first,
and then will the child elements.
Similarly, when calling event.stopPropagation()
(or, for example, using v-on:clickout.stop in Vue.js),
it will be the parent element stopping the child element from firing the event.
Feel free to add or remove elements dynamically! Clickout-Event monitors changes to the document, and will ensure the out-events works no matter which dynamic front-end framework you're using.