web-dev-qa-db-ja.com

Enterキーを押すと、<button>で `click`イベントがトリガーされるのはなぜですか？

<button>にclickイベントハンドラーを追加するだけです。

document.getElementsByTagName("button")[0].addEventListener("click", event => {
  event.preventDefault();

  console.log("Click:", event);
});
<button>Press <kbd>Enter</kbd> on me</button>

（ デモリンク ）

それにもかかわらず、Firefoxでボタンにタブで移動したら、 Enter、clickイベントが発生しているのがわかります。ただし、この動作がどこに文書化されているかはわかりません。これは標準的な動作ですか？すべてのブラウザーで機能することを期待できますか？

javascripthtmldomaccessibilitydom-events
14
Vincent

これは主に、多くの作者がクリックしないユーザーを考慮に入れずにクリックイベントを使用してコードを歴史的に記述しているためです（キーボードを使用してナビゲートすることを好むため、ポインティングデバイスを使用することが困難になるため、またはその他の理由）。

動作は HTML仕様に記載されています ：

HTMLの特定の要素にはアクティブ化動作があります。つまり、ユーザーはそれらをアクティブ化できます。これにより、アクティベーションメカニズムに依存する一連のイベントがトリガーされ、通常は、以下で説明するように、クリックイベントが発生します。

…

アクセシビリティのために、キーボードのEnterキーとSpaceキーは、多くの場合、要素のアクティブ化動作をトリガーするために使用されます。

次に、ステップを詳細に説明します。

17
Quentin

キーボードユーザー（マウスが利用できない場合）のため、ボタンにフォーカスがあるときに Enter （たぶん Space 同様に）クリックイベントをシミュレートします。

これはブラウザのアクセシビリティサポートであり、すべてではないにしてもほとんどのブラウザが提供しています。

3
Adriani6

これはWCAGに記載されています：SCR35：アンカーとボタンのonclickイベントを使用してアクションキーボードにアクセスできるようにする：

onclickはマウスに関連付けられているように聞こえますが、onclickイベントは実際にはリンクまたはボタンのデフォルトアクションにマップされています。デフォルトのアクションは、ユーザーがマウスで要素をクリックしたときに発生しますが、ユーザーが要素にフォーカスしてヒットしたときにも発生します。 enter または space、および要素がアクセシビリティAPIを介してトリガーされたとき。

これは IEVents /クリックセクション にも記載されています。

ポインターデバイスに関連付けられていることに加えて、click eventタイプ[〜＃〜] [〜＃〜]は、要素のアクティベーションの一部としてディスパッチする必要があります（§3.5アクティベーションのトリガーと動作で説明） 。

アクティベーショントリガーの段落 は次のように述べています。

ユーザーが開始するアクティブ化トリガーには、アクティブ化可能な要素でのマウスボタンのクリック、 Enter key アクティブ化可能な要素にフォーカスがある場合、またはその要素にフォーカスがない場合でも、アクティブ化可能な要素に何らかの方法でリンクされているキー（ホットキーまたはアクセスキー）を押す場合。

つまり、これらのトリガーのいずれかがclickイベントを送出します。

3
Adam