preventDefault

[buschtoens]

{{action}} supports a preventDefault option to automatically call event.preventDefault():

<a href="/" {{action this.someAction preventDefault=true}}>Click me</a>

We could either add the same option to {{on}}:

<a href="/" {{on "click" this.someAction preventDefault=true}}>Click me</a>

Or explore alternative solutions. For instance, we could create a prevent-default helper:

<a href="/" {{on "click" (prevent-default this.someAction)}}>Click me</a>

<a href="/" {{on "click" this.someAction}} {{on "click" (prevent-default)}}>Click me</a>

Currently all named parameters are passed through to addEventListener as event options. Adding a preventDefault would mean that we introduce special handling for some options.

[buschtoens]

Exemplary prevent-default implementation:

import { helper } from '@ember/component/helper';

export const preventDefault = ([handler]) => event => {
  event.preventDefault();
  if (handler) handler(event);
};

export default helper(preventDefault);

[rwjblue]

I'd vaguely prefer a wrapping helper over adding a hash argument. Either of these seem good to me:

<a href="/" {{on "click" (prevent-default this.someAction)}}>Click me</a>
<a href="/" {{on "click" this.someAction}} {{on "click" (prevent-default)}}>Click me</a>

[NullVoxPopuli]

what if someone always wants to prevent default?

<a href="/" {{pdon "click" this.someAction}}>Click me</a>

idk

[lifeart]

<a href="/" {{on-local "click" this.someAction}}>Click me</a>

-> local = preventDefault & stopPropagation

<a href="/" {{on "local:click" this.someAction}}>Click me</a>

[lifeart]

<a href="/" {{on "click" (dom-event this.someAction stop=true prevent=true)}} >Click me</a>

[buschtoens]

Personally I am also leaning more towards the wrapping helper syntax. I am just not 100 % sure, whether these helpers should be included in this addon. I could add a config so that they may be stripped from the build.

stopPropagation is another interesting aspect. With the wrapping helper syntax applying both would look like this:

<a
  href="/"
  {{on "click" (prevent-default (stop-propagation this.someAction))}}
>
  Click me
</a>

<a
  href="/"
  {{on "click" this.someAction}}
  {{on "click" (prevent-default)}}
  {{on "click" (stop-propagation)}}
>
  Click me
</a>

<a
  href="/"
  {{on "click" this.someAction}}
  {{on "click" (prevent-default (stop-propagation))}}
>
  Click me
</a>

Besides stopPropagation there's also stopImmediatePropagation, but it is seldom used. List of all Event methods.

Tangentially related: There's been some talk about how we might want to swap out the underlying event system in the future. If we also add stopPropagation, we should be able to emulate it with a different event system, for instance Ember's EventManager.

[buschtoens]

I've released (prevent-default) in v0.7.0. 🚀
Thanks everybody! 👍

stopPropagation is tracked in #9. Excluding helpers from the build is tracked in #10.