template-no-pointer-down-event-binding.md

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

💼 This rule is enabled in the following configs: strict-gjs, strict-gts.

Disallows pointer down event bindings.

Pointer down events can cause accessibility issues because they don't work well with keyboard navigation. Use click or keydown events instead.

Rule Details

This rule disallows the use of pointerdown events in templates.

Examples

Examples of incorrect code for this rule:

<template>
  <button {{on "pointerdown" this.handlePointerDown}}>Click</button>
</template>

<template>
  <div onpointerdown={{this.handlePointerDown}}>Content</div>
</template>

Examples of correct code for this rule:

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

<template>
  <button {{on "keydown" this.handleKeyDown}}>Press</button>
</template>

<template>
  <div {{on "mousedown" this.handleMouseDown}}>Content</div>
</template>

Migration

Replace:

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

With:

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

Or for keyboard support:

<button {{on "click" this.action}} {{on "keydown" this.handleKey}}>

References

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