Skip to content

Instantly share code, notes, and snippets.

@ccmelas
Created October 18, 2019 14:54
Directive for Handling outside clicks for Vue Components
function findElement(element, vnode = null) {
if (vnode) {
return vnode.context.$refs[element];
}
return document.querySelector(`#${element}`);
}
function elementContainsEvent(event, element, vnode = null) {
const domElement = findElement(element, vnode);
return domElement && domElement.contains(event.target);
}
export default function(Vue) {
let handleOutsideClick;
Vue.directive('click-outside', {
bind (el, binding, vnode) {
handleOutsideClick = (e) => {
e.stopPropagation();
const { handler, exclude = [], excludeGlobal = [] } = binding.value;
let clickedOnExcludedElement =
exclude.some(element => elementContainsEvent(e, element, vnode)) ||
excludeGlobal.some(element => elementContainsEvent(e, element));
if (!el.contains(e.target) && !clickedOnExcludedElement) {
handler.call(vnode.context);
}
};
document.addEventListener('click', handleOutsideClick);
document.addEventListener('touchstart', handleOutsideClick);
},
unbind () {
document.removeEventListener('click', handleOutsideClick);
document.removeEventListener('touchstart', handleOutsideClick);
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment