Vue: Add a preventDefault event filter

[skyrpex]

I find it pretty cumbersome to add an event parameter and write e.preventDefault(); in every single method of my components.

It would be nice to add a v-on filter that automatically does that. It would be used like this:

<form v-on="click:submit | preventDefault"> ... </form>

It looks better to me because the method itself shouldn't really know about the original event that triggered the call (but the template should, and does).

[SeoFood]

Yep same for me at the moment i do use a custom directive like:

<a href="#" v-popup="{ref: 'more', position: 'bottom center'}" v-prevent-default>

[posva]

@SeoFood What about sharing that directive? :stuck_out_tongue:

[SeoFood]

Sure:

module.exports = {
        bind: function () {
            this.el.addEventListener ('click', function(e) {
                e.preventDefault();
            });
        },

        update: function (value) {
        }
};

[cmmu]

This would be very useful in my project. SeoFood, I have tried adding the unbind clause to the code for cleanup, but in this case it stops working when I use it in combination with v-if directive. Not sure if it's even necessary to unbind it.

var handler = function(e) { e.preventDefault() }
Vue.directive("prevent-default", {
    bind: function() {
        this.el.addEventListener("click", handler)
    },
    unbind: function() {
        this.el.removeEventListener("click", handler)
    }
})

[uwe]

+1

[alioygur]

+1

[skyrpex]

I've created a more complete version. It automatically handles button, anchor and form elements.

You can find the gist here.

[karevn]

+1

[yyx990803]

Would it make sense to always call preventDefault on certain events? e.g. click on <a> <button>and submit on <form> in particular. Is there any legit use cases where you don't want to preventDefault for these three cases?

[skyrpex]

I guess it makes sense only if the element has the v-on directive on it!

[yyx990803]

@skyrpex of course, we are talking in the context of v-on behavior.

[simplesmiler]

A thing to consider is <a> behavior for click with modifier keys (ctrl, shift) and/or other-than-left mouse button. There is nothing more infuriating than an app ignoring middle click to open link in a new tab.

[mark-hahn]

e.g. click on

I can easily imagine wanting multiple things to happen on a click. Like
closing all ancestor components.

On Thu, Oct 1, 2015 at 1:30 PM, Denis Karabaza [email protected]
wrote:

A thing to consider is behavior for click with modifier keys (ctrl,
shift) and/or other-than-left mouse button. There is nothing more
infuriating than an app ignoring middle click to open link in a new tab.

—
Reply to this email directly or view it on GitHub
https://github.com/yyx990803/vue/issues/1369#issuecomment-144838980.

[thelinuxlich]

Maybe a special option, like KO:

http://knockoutjs.com/documentation/click-binding.html#note-4-preventing-the-event-from-bubbling

[karevn]

I think "make it explicit" approach should be applied to match developer expectations. But... May be, yet another attribute name modifier, like:

<button @click.pd="handler">Click me</button>
or
<button @click:="handler">Click me</button>

[thelinuxlich]

hmm nice suggestion, +1 for attribute modifier

I think it should call preventDefault automatically and if you want the opposite:

<button @click.bubble="handler">Click me</button>

[karevn]

@thelinuxlich looks good, but the problem is that events like "click" will not bubble by default, while events like mouseover should bubble in most cases... So defaults will be different for different event types, which does not look good for me...

[mark-hahn]

defaults will be different for different event types,

That would be horrible.

On Thu, Oct 1, 2015 at 11:30 PM, Nikolay Karev [email protected]
wrote:

@thelinuxlich https://github.com/thelinuxlich looks good, but the
problem is that events like "click" will not bubble by default, while
events like mouseover should bubble in most cases... So defaults will be
different for different event types, which does not look good for me...

—
Reply to this email directly or view it on GitHub
https://github.com/yyx990803/vue/issues/1369#issuecomment-144935547.

[thelinuxlich]

Agreed, then keep the original behavior and when you want to preventDefault:

<button @click.unbubble="handler">Click me</button>

[karevn]

<button @click.stop="handler">Click me</button>
<button @click.prevent="handler">Click me</button>

?

[thelinuxlich]

good options too!

[posva]

the options proposed by @karevn look better in my opinion because they remind of the functions stopPropgation() and preventDefault()

This is the first time I ever heard about bubble and unbubble :laughing:
Funny name BTW

[Rastishka]

Event bubbling, event capturing and event propagation - are 3 different things, are they?

<button @click.stopBubbling="handler">Click me</button>
<button @click.stopPropagation="handler">Click me</button>
<button @click.stopAll="handler">Click me</button>

[yyx990803]

@Rastishka bubble and propagation is the same thing. There's the difference between stopPropagation() vs. stopImmediatePropagation() though.

I like the modifier approach - in fact I was thinking about exactly what @karevn proposed before I went to sleep yesterday!

<button @click.stop="handler">Click me</button>
<button @click.prevent="handler">Click me</button>

stopImmediatePropagation seems to be a rare and very specific use case, so I think it's fine to leave it in JavaScript land.

[young-steveo]

I like the idea of always preventing default, unless specified. Most of the time, when adding a click handler to an element, the default behavior is not desired. What about:

<!-- will propagate, will prevent default -->
<button @click="handler">Click me</button>

<!-- will propagate, will not prevent default -->
<button @click.default="handler">Click me</button>

<!-- will stop propagation, will prevent default -->
<button @click.stop="handler">Click me</button>

[JosephSilber]

Does anyone know what Angular does? They definitely prevent some events (submit comes to mind).

[yyx990803]

@JosephSilber looks like submit is the only one. From ng's docs:

(ngSubmit) Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.

[yyx990803]

@young-steveo it just seems harder to remember. Think of it like this:

• Without any modifier, the behavior is the same as native browser behavior
• .prevent means preventDefault() will be called for you.
• .stop means stopPropagation() will be called for you.

Seems to be much simpler conceptually.

[yyx990803]

Landed in 1.0 alpha/beta branches as .stop and .prevent modifiers. Can be used together.

[nervgh]

This syntax not working with https://github.com/webpack/html-loader =(

Is there angular way for these cases? For example:

<element v-on:click="toggle();$event.stopPropagation()"></element>

[yyx990803]

@nervgh use https://github.com/vuejs/vue-html-loader

[nervgh]

@yyx990803 thanks! :+1: