no-pointer-down-event-binding.md

no-pointer-down-event-binding

✅ The extends: 'recommended' property in a configuration file enables this rule.

Many browser events have both an "up" and a "down" version that can be listened to (mouse{up,down}, pointer{up,down}, etc). For accessibility purposes, it's better to bind to the "up" event for pointer events. This rule helps guide developers in the right direction by calling out binding to the "mousedown" and "pointerdown" events.

Examples

This rule forbids the following:

<div {{on 'mousedown' this.handleMouseDown}}></div>

<div {{action this.handleMouseDown on='mousedown'}}></div>

<input type="text" onmousedown="handleMouseDown()">

This rule allows the following:

<div {{on 'mouseup' this.handleMouseUp}}></div>

<div {{action this.handleMouseUp on='mouseup'}}></div>

<input type="text" onmouseup="handleMouseUp()">

Component arguments are not validated, even if their name looks like the intent might be to register a down event handler.

<MyComponent @onMouseDown={{this.handleMouseDown}} />

References

• WCAG guidelines on using the "down"-event