Use action with non-clickable elements

Questions General
1

Hello Dears, could you pls help me to understand how to use action with non-clickable elements like div, span, etc. correctly?

<div {{action "handleClick"}}>Click Me</div>
<div onclick={{action "handleClick"}}>Click Me</div>
<div {{action "handleClick" on="click"}}>Click Me</div>
2

Any of those will work, although the second option is generally discouraged as you can hit some interesting snags.

But it’s worth considering making your div a <button> so you get accessibility out of the box. If that isn’t possible, then it’s worth considering using a role=“button” instead. But that’s only part of a good accessible implementation. More details available here: HTML5 Accessibility Chops: Just use a (native HTML) button - TPGi

1 Like