Prevent default click on outside elements

[brendan1212]

Hi there,

I'd love to see this implemented as a feature, if possible. : )

I'm currently using v-click-outside for closing opened dropdowns and popups, but I'd like to prevent the default click on any element in the page that gets clicked while using it this way.

Any suggestions would be great too.

Thanks!

[ndelvalle]

Hi @pachiraDIG this library supports a middleware, the middleware function receives the event as an argument, you can call event.preventDefault() to achieve what you want.

Let me know if this works for you 👍

[brendan1212]

Hmm... seems as though I can't get the middleware to work. Even the console logs aren't firing. Although, everything is matching up with the codesandbox demo. Using nuxt, so I created a plugin -- which is working because I'm not directly importing the library in the component itself.

Any suggestions?

[ndelvalle]

@pachiraDIG take a look at this article maybe we can catch the event at the capturing phase before its bubbling phase.
I think this should be an option and not having this by default, we do not want to stop the event propagation by default.

[719media]

In case anyone else stumbles upon this answer looking for how to prevent default click, there is another wrinkle that tripped me up for a few minutes. This library binds touchstart if the device supports it, otherwise click. So v-outside-click can fire on touchstart, which you attempt to prevent, thinking you're preventing the click...
Anyway, just something to consider when troubleshooting this issue.