vue-global-events
vue-global-events copied to clipboard
How to `stopPropagation` and `preventDefault` on all listeners?
I have about 40 key listeners set up, and on all of these I want to do
event.stopPropagation() and event.preventDefault() .
How can I do this without having to attach .stop.prevent to all of these?
I went with this method. Maybe it can be added to the ReadMe.
<GlobalEvents
:filter="filterGlobalEvents"
filterGlobalEvents (event, handler, eventName) {
const el = event.target
const elFocussed = (el.nodeName === 'INPUT' ||
el.nodeName === 'TEXTAREA' ||
el.nodeName === 'A' ||
el.nodeName === 'BUTTON')
if (elFocussed) return false
event.preventDefault()
event.stopPropagation()
return true
},
Using the filter is the only way now, as with #20 a prop could be added for prevent and stop maybe also capture
@posva Thanks. I had stop using my method, because I realised it was blocking all other hotkey's as well!!
Anyway, this is how my config looks like:
I was thinking, there's no way I have a list of all the key-combinations I define inside <GlobalEvents />. If you could pass on a 4th parameter to the filter event like so:
filterGlobalEvents (event, handler, eventName, arrayOfDefinedKeyCombinations)
Then I could write the filter so that event.stopPropagation() and event.preventDefault() is only triggered when the key combination is included in the arrayOfDefinedKeyCombinations.
One other way would be to define a new prop/event for GlobalEvents where we could pass on stuff like
so:
<GlobalEvents
@custom-keydown.m="move"
/>
And have some sort of settings file where we can define what default modifiers this custom-keydown listener should get.