How to `stopPropagation` and `preventDefault` on all listeners?
mesqueeb opened this issue · 4 comments
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.