EventListenerにおけるmousedown時のカウントアップ数

Question

maincounterという関数を作り、キーボードでクリックした際に
カウントアップするようになっているJavascriptを作成しました。

document.getElementById('start_stop').addEventListener('click', maincounter)

  function maincounter(){
 count++;  

　/////

最近、マウスを左クリックしても操作できるように仕様変更して、
下記のように追加しました。

document.getElementById('start_stop').addEventListener('click', maincounter)
document.getElementById('start_stop').addEventListener('mousedown', maincounter)

  function maincounter(){
 count++;  

　/////

ただ、マウスクリックとキーボードクリックにおいて、動作に違いがあり、このカウントアップ数がいくつになっているかを表示するようにしたところ、

①キーボードクリックではEnterを押すごとにきちんとカウントアップしている
（理想の動作）
②mousedown、つまりマウス左クリックした場合、クリック押した瞬間と離した瞬間で二度カウントアップしてしまう。

狙っている使用では押した瞬間だけカウントアップしてくれれば良いのですが、
addEventListener('mousedown', )において上記②のような動作になるものでしょうか？

宜しくお願い致します。

Answer 1

clickを採らず、mousedown だけにすればよいのでは？

Comments

[kazu_jc]

また、別の問題になってくるのですが、これがWEBアプリケーションで、
Enterを使用したいという人と、マウスの方がやり易い、という人が後から出て来たので仕様追加で対策しています。なので、両方使用したいというのと、そもそもなぜmousedownでカウントが倍になるの？？という単純な疑問を解決したかったので質問したところもあります。

[kei344]

クリック動作は、「クリック領域に入って」「マウスボタンを押して」「マウスボタンを放して」で成立します。クリックイベントとそれぞれのイベントは別個に拾えます。
「クリック」と「マウスボタンを押して」両方にカウントアップをつければそれは二回になるでしょう。

[kazu_jc]

なるほど「clickがマウスボタンでも反応していた、それで倍数になっている」ということですか！ベストな書き方は他にあるかもしれませんが、
とりあえずclick → keydownに変えて、正常に動作しました。
addEventListener('keydown', 　)
addEventListener('mousedown',　)
アドバイス、ありがとうございました！

Answer 2

clickイベントはマウスボタン押下でも発火します。
キーボード操作、マウス操作共にクリック1回分とカウントする意図であれば、clickイベントハンドラのみにカウント処理を入れれば良いと思います。
(※掲示さらたコードのみならずで見るなら、mousedownを監視する必要はありません。)

Re: negentropy さん

Comments

[kazu_jc]

ご回答ありがとうございます。イベントハンドラについてもう少し学んでみたいです。