For accessibility, it is often needed to perform the same action on mouse-click and on pressing enter or space on the keyboard. What is the best way handle those events on a given element?

For example:

<div @click="doTheThing" @keyup.enter="doTheThing" tabindex="0">Do the Thing</div>

Is there a better way to call the the event handler without having the multiple listeners?

For accessibility, it is often needed to perform the same action on mouse-click and on pressing enter or space on the keyboard. What is the best way handle those events on a given element?

For example:

<div @click="doTheThing" @keyup.enter="doTheThing" tabindex="0">Do the Thing</div>

Is there a better way to call the the event handler without having the multiple listeners?

• vue.js

• 3 Idk if there's a better way to do it on a div, but if it's an element that's normally clickable like a button it seems to work for both if you just set @click – vanblart Commented Feb 7 at 20:43
• In addition to click and enter, I started looking for answers to this question based on building a tab component which needs to also listen for arrow key presses for keyboard navigation. The directive example from the accepted answer will help with that. – Peter Hentges Commented yesterday

2 Answers 2

A directive to the rescue:

Playground

<script setup>

const vAction = (el, {value}) => {
  el.addEventListener('click', value);
  el.addEventListener('keyup', e => e.key==='Enter' && value());
}

function doTheThing(){
  alert('do the thing');
}
</script>

<template>

<div v-action="doTheThing" tabindex="0">Do the Thing</div>

</template>

The best way to handle these events on a specific element - is when the element is a button.
It will handle click event like @keyup.enter and @keyup.space.
And it will be harmonious with accessibility.

<script setup>
const click = () => {
  alert('click');
}
</script>

<template>
  <button @click="click">Button</button>
</template>

Example