MacのChromeとWinのChromeでどうもkeydownの動作が違うようなので、検索してみたところ、以下のような記事に到達しました。
JavaScriptのキーイベント・キーを押し続けた場合のブラウザ毎のイベント差異 ( しゃいん☆のブログ| 名古屋市 Webシステム開発 サーバ構築 ネットワーク構築 株式会社コネクティボ )
記事が古いのでいくつか検証してみます。
検証項目
keydownを押下し続けた場合のイベント発火の差。
キーとしてはシステムキーとして⌘, Ctrl
キー、通常の文字キーとしてa
、後は矢印キーとして←
キーを選びました。
検証対象
WinとMacの代表的なブラウザで手元ですぐ操作できたもの。具体的には次のもの。
- Windows
- Chrome
- Internet Explorer
- Mac
- Safari
- Chrome
- FireFox
検証方法
以下のような簡易なHTMLページを作成してブラウザで開き、キーを押下し続けました。
<meta charset="utf-8"> <title>keydownのテスト</title> <p id="label"></p> <script> document.onkeydown = function(e) { var elem = document.getElementById("label"); if(elem.innerHTML == "") { elem.innerHTML = "aaa"; } else { elem.innerHTML = ""; } return false; }; </script>
結果
以下の表の通りになりました。
OS | ブラウザ | ⌘ / Ctrl | a | ← |
---|---|---|---|---|
Win | Chrome | 連続して発火 | 連続して発火 | 連続して発火 |
IE | 連続して発火 | 連続して発火 | 連続して発火 | |
Mac | Chrome | 一回のみ発火 | 連続して発火 | 連続して発火 |
Safari | 一回のみ発火 | 連続して発火 | 連続して発火 | |
FireFox | 一回のみ発火 | 連続して発火 | 連続して発火 |
その他
ネイティブな処理をよくしらないのでなんとも言えませんが、以下の記述からしても、恐らくOSのkeydown処理の違いに由来するんでしょうね。
ウィンドウ上での keydown イベントに対応するイベントハンドラです。
window.onkeydown – Web API インターフェイス | MDN