クリックイベントでMouseかEnterキーかを判定する

動機

button要素はクリックした時にfocusがあたった状態になるので、
デザインの再現の際に、不都合があることがあります。

button:focus {
    outline: none;
}

上記のようにfocus時のスタイルを消してしまえば、いったんは良いのですが、
キーボードでアクセスした時に、そのbuttonがfocusされているのか視覚的に分からないため、アクセシビリティ的には良くありません。

ですので、マウスでクリックした時はfocus時のスタイルを消し、キーボードアクセスでfocusされた時は、スタイルを残せるようにJavaScriptで判定したいと思います。

実装例

const button = document.querySelector('button');

const onClickButton = (event) => {
    if (event.detail !== 0) {
        event.currentTarget.style.outline = 'none';
    }
}

const onFocusButton = (event) => {
    event.currentTarget.style.outline = '';
}

button.addEventListener('click', onClickButton, false);
button.addEventListener('focus', onFocusButton, false);

解説

onClickButtonの箇所

clickイベントの時、引数eventにはMouseEventオブジェクトが入ります。
MouseEventには（自分が確認した限り）、keydown時のevent.keyのように押下されたキーを判定できるプロパティが無かったため、event.detail !== 0で、マウスのクリックなのか、Enterキーなのかを判定しました。

event.detailが何かと言うと、クリック数を読み取り専用で返してくれるプロパティのようです。

UIEvent.detail - Web API | MDN

ですので、今回はクリック数がゼロかどうかで、MouseかEnterかを判定しています。
つまり、

event.detail !== 0は、クリック数が0以外の時なので、
Mouseでクリックされた時の挙動を記述します。

Mouseでクリックされた時はevent.currentTarget.style.outline = 'none';でfocus時のスタイルを消します。もっと詳細にスタイルを指定したい場合は、classList.add('className')でクラス制御でスタイルを変更しても良いかもしれません。

onFocusButtonの箇所

onFocusButtonでは、focusが当たった時に、onClickButtonで消したスタイルを元に戻す記述をしています。

event.currentTarget.style.outline = '';で空文字を代入しているのは、既存のスタイル（ブラウザのデフォルトスタイルや、CSSで指定したスタイル）が再度適用できるようにです。

まとめ

以上、clickイベント時にMouseかEnterキーかを判定して、
focus時のスタイルをコントロールする方法を紹介しました。
より良い方法がありましたら、是非コメントを頂けたら幸いです。