1.0.2 • Published 6 years ago
action-outside v1.0.2
action-outside :mag_right:
Invoke a callback function when clicked or tabbed outside one or multiple DOM elements.
import ActionOutside from 'action-outside';
const menu = document.querySelector('.menu');
const actionOutsideMenu = new ActionOutside(menu, () => {
console.log('clicked or tabbed outside menu!');
});
actionOutsideMenu.listen(true);NPM
npm install --save action-outsideparameters
| parameter | type | description |
|---|---|---|
| elements | DOM element or array of DOM elements | clicking or tabbing outside these elements will invoke the callback function |
| callback | function | is invoked after a click or tab outside the specified elements |
const myActionOutside = new ActionOutside(elements, callback);methods
| method | argument type | description |
|---|---|---|
| .listen() | boolean | add or remove the event listener for mouseup (click) and keyup (tab) |
const myActionOutside = new ActionOutside(elements, callback);
myActionOutside.listen(true);
myActionOutside.listen(false);demo
import ActionOutside from 'action-outside';
const dropdown = document.querySelector('.dropdown');
const dropdownButton = document.querySelector('.dropdown__button');
const dropdownList = document.querySelector('.dropdown__list');
let expanded = (dropdownButton.getAttribute('aria-expanded') == 'true');
dropdownButton.addEventListener('click', toggleDropdown);
const dropdownActionOutside = new ActionOutside(dropdown, toggleDropdown);
function toggleDropdown() {
dropdownButton.setAttribute('aria-expanded', !expanded);
dropdownList.setAttribute('aria-hidden', expanded);
dropdownActionOutside.listen(!expanded);
expanded = !expanded;
}Note: you most likely want your callback function to remove the event listener by using the listen(false) method!