ember/template-no-pointer-down-event-binding

💼 This rule is enabled in the 📋 template-lint-migration config.

Disallows pointer down event bindings (mousedown, pointerdown).

Pointer down events fire before the user releases the pointer, which can cause accessibility issues — actions triggered on down events don't allow users to cancel by moving the pointer away before releasing. Bind to the corresponding pointer up event instead.

Rule Details

This rule disallows the use of mousedown, onmousedown, pointerdown, and onpointerdown events in templates, whether via {{on}}, {{action on=...}}, or HTML attributes.

Examples

Examples of incorrect code for this rule:

<template>
  <button {{on "mousedown" this.handleMouseDown}}>Click</button>
</template>

<template>
  <div {{on "pointerdown" this.handlePointerDown}}>Content</div>
</template>

<template>
  <div onmousedown={{this.handleMouseDown}}>Content</div>
</template>

<template>
  <div {{action this.handler on="mousedown"}}></div>
</template>

Examples of correct code for this rule:

<template>
  <button {{on "mouseup" this.handleMouseUp}}>Click</button>
</template>

<template>
  <div {{on "pointerup" this.handlePointerUp}}>Content</div>
</template>

<template>
  <button {{on "click" this.handleClick}}>Click</button>
</template>

Migration

Replace:

<button {{on "mousedown" this.action}}>

With:

<button {{on "mouseup" this.action}}>

Or use the more modern pointer event:

<button {{on "pointerup" this.action}}>

References

• ember-template-lint no-pointer-down-event-binding
• MDN - Pointer events
• MDN - mousedown event