javascript - IE でキャプチャする奇妙なイベント

Question

IE10 と Chrome ブラウザで同じコードをテストするだけです。

jsfilddle リンク

<div id='a'><input onclick="console.log('a');"/></div>
<div id='b'><button onclick="alert('b');"/></div>`

入力とボタンの2つの異なるタグを2つの異なるdivタグに入れました。両方の要素 (入力、ボタン) には onclick 属性があります。

私がしていることは単純です

1. 入力タグにカーソルを置く
2. エンターキーを押します

これをIE10とChromeで試しました。

Chrome ブラウザーで、ボタンにアタッチされたイベント ハンドラーが実行されていません。しかし、ボタンに添付されたIEイベントハンドラーが実行されました。

なぜこの災害が起こるのか誰か教えてください

Answer 1

この動作は、HTML5 仕様に従って Chrome によって正しく実装されている暗黙的なフォーム送信に関連しています。ここで仕様を確認できます。

つまり、テキスト フィールドがフォーカスされているときに「Enter キーを押す」と、ブラウザー制御の暗黙的なフォーム送信が呼び出され、「フォーム」要素の下の最初の送信ボタンが検索され、添付されたハンドラーが呼び出されます。
あなたの場合、「ボタン」要素は「送信」タイプにデフォルト設定されていますが、「フォーム」要素の子孫ではないため、呼び出されません。
現在の IE の動作は仕様どおりではないと想定できます。