shentao/vue-global-events

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
    },
posva commented

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:

image

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.