Say I have multiple dropdowns or elements on the page that all use this directive I've used called closable. This calls an expression passed in if the element clicked is outside of the element using the directive.
However the expected behaviour is that if I click an element on page i.e. another dropdown with a directive it should get that click event path compare them to the existing one and if they don't match or aren't contained in the elemement it should close it.
What actually happens is the click event is never registered, it just initalizes another directive and for some reason that click event is lost.
The only time the click event is registerd is if I click on something that doesn't have the directive.
Vue.directive ( 'closable', {
inserted: ( el, binding, vnode ) => {
// assign event to the element
el.clickOutsideEvent = function ( event ) {
console.log ( {el, event} );
// here we check if the click event is outside the element and it's children
if ( !( el == event.path[0] || el.contains ( event.path[0] ) ) ) {
// if clicked outside, call the provided method
vnode.context[binding.expression] ( event );
}
};
// register click and touch events
document.body.addEventListener ( 'click', el.clickOutsideEvent );
document.body.addEventListener ( 'touchstart', el.clickOutsideEvent );
},
unbind: function ( el ) {
// unregister click and touch events before the element is unmounted
document.body.removeEventListener ( 'click', el.clickOutsideEvent );
document.body.removeEventListener ( 'touchstart', el.clickOutsideEvent );
},
stopProp ( event ) {
event.stopPropagation ();
},
} );
So aftering trying to get the events to register I just decided to go about this a diffrent way.
Everytime a closable directive is inserted it calls any previous expressions that where open before,and then adds the new expression handler to a variable called prevNodes so next time a closable directive is inserted it calls that expression