Skip to content

Latest commit

 

History

History
80 lines (56 loc) · 1.67 KB

File metadata and controls

80 lines (56 loc) · 1.67 KB

ember/template-no-down-event-binding

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

Disallows mouse down and touch start event bindings.

Mouse down and touch start 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 mousedown and touchstart events in templates.

Examples

Examples of incorrect code for this rule:

<template>
  <button {{on "mousedown" this.handleMouseDown}}>Click</button>
</template>
<template>
  <div {{on "touchstart" this.handleTouchStart}}>Content</div>
</template>
<template>
  <div onmousedown={{this.handleMouseDown}}>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 "mouseup" this.handleMouseUp}}>Content</div>
</template>

Migration

Replace:

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

With:

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

Or for keyboard support:

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

References