Enterとマウス左クリックでの反応誤差

初心者です。簡単なゲームなのですが、その中にスタートボタンがあり、
addEventListener('click', )にてスタートするようになって
います。時間を競うゲームなので、スタートボタンを押して
すぐに反応して欲しいのですが、いまキーボード操作で
”Enter”を押すとすぐ反応してくれるのですが、html(php)画面の
”スタートボタン”をマウス左クリックで押すと反応が約0.15秒
くらい遅れます。
時間を競うゲームなので、この0.15秒が大きいのですが、
画面のCSSで作成されたボタンをTabで合わせている状態で
Enterを押すのと、マウスクリックするのとでは、
時間誤差は出ますか？また、マウスクリックで時間誤差を
無くす方法がありますでしょうか？
簡単ですが、ソースを下記に記します。
参考にボタンはbootstrapという物を使っています。

<!DOCTYPE html> <html lang="ja"> <head> 　/// <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

　///

</head> <body> /////

　　<div>
<button id="start_stop" class="btn1 btn-lg btn-primary">START</button>
</div>

　/////
<script>
/////

　　document.getElementById('start_stop').addEventListener('click',function(){---})

　/////
</script>

</body>

追記
もともと、タイムを競うゲームなので、タイムそのものがスコアになるので0.15秒という値が分かります。

ゲーム開始はスタートボタンをマウスで押すか、Enterで押すかの違いなので、押すタイミングのずれはゼロです。（物理的なボタンの大きさ機構の違いだけなのでゲームに影響を与えるほどの値とは思えません。）
スタートボタンを押すと、ストップボタンに変化します。ストップボタンを押すとスタートボタンにまた変わる、を繰り返します。マウスは動かさないので、動作の違いは左クリックとキーボードEnterのボタン違いのみなのです。

dice142

2018/10/15 03:03

「反応が約0.15秒くらい遅れます」というのはどのようにして計測したのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

~~マウスカーソルを動かす系のゲームなら、ボタン位置から
ゲーム画面までの距離でどうしても時間がかかります。
キーボードでボタンクリックの処理を行うと、マウスカーソルの位置は
ゲーム画面内にかまえていても構わないので、その差かなと思います。
~~
~~
解決方法としては以下のようなことが考えられるのかなと思います。
※実現可かどうかは調べてないです。
~~

~~ボタンをキーボードで操作できなくする~~
~~スタートボタンのクリック判定後にカウントダウンを入れる~~
~~スタートボタンをなくし、ゲーム画面をクリックすることでゲーム開始にする~~

[ゲーム仕様が思ってたものと違ってたので修正]

同じボタンを2回押すことによる判定であれば、単に入力機器による動作の違いな気がします。
マウスのクリックはボタンを押して離すまでが動作ですが、
キーボードによる判定はキーが押下されたときで、上に戻るのは判定外です。
その差が質問者様の環境の0.15秒ではないかと思います。

bootstrapは単にCSSライブラリなのでクリック時の挙動はbootstrapを使っていようが使っていまいが同じです。

投稿2018/10/15 04:19

編集2018/10/15 04:52

dice142

総合スコア5158

kazu_jc

2018/10/15 04:29 編集

ご回答ありがとうございます。ゲーム開始はスタートボタンをマウスで押すか、Enterで押すかの違いなので、押すタイミングのずれはゼロです。（物理的なボタンの大きさ機構の違いだけなのでゲームに影響を与えるほどの値とは思えません。）スタートボタンを押すと、ストップボタンに変化します。ストップボタンを押すとスタートボタンにまた変わる、を繰り返します。マウスは動かさないので、動作の違いは左クリックとキーボードEnterのボタン違いのみなのです。

dice142

2018/10/15 04:30

仕様は質問文に追記をお願いします。私の他にも回答される方の参考になるので。

dice142

2018/10/15 04:53

仕様を考慮した回答に修正しました。

kazu_jc

2018/10/15 05:04

＞マウスのクリックはボタンを押して離すまでが動作ですがご回答ありがとうございました。自分で気付かなかった（知らなかった）のですが、検証したらその通りでした。”離す”ときに動作を開始していました。その誤差でした。ちなみに、Javascriptで、”マウスを押したときに動作”というようなコマンドはあるのでしょうか？？

dice142

2018/10/15 05:06

「onmousedown」がご希望の動作かと思います。

dice142

2018/10/15 05:07

addEventListenerで記述するなら「mousedown」ですかね。使用される時は調べてから使うことをおすすめします。

kazu_jc

2018/10/15 05:50

ありがとうございました。大変助かりました。

dice142

2018/10/15 05:54

あとはキーボードやマウスの製品によって多少は異なります。（極端な話、普通のキーボードのエンターキーを2回押すのと　ビッグエンターキーで2回押すのとでは明らかに速さが違いますよね。）