onclickとondblclickの使い方

Question

始めまして。
javascriptの勉強中にクリックイベントについてわからない点がありましたので、ご質問させていただきます。

<script type="text/javascript">

    function Click() {

        alert("クリック");
    }

    function dbClick() {
        alert("ダブルクリック");
    }
</script>

<input type="checkbox" name="check" ondblclick="dbClick()" onclick="Click()">

上記の記述で作成したcheckbox要素をクリックしても、ダブルクリックしてもClick()しか動作しません。
上記の記述でondblclickイベントが発生しない理由をご教示頂けないでしょうか。
またこうすれば、ondblckickイベントが発生する。
など教えて頂けないでしょうか。
よろしくお願い致します。

Answer 1

マウスクリックについてですが、ダブルクリックまでは下記の順でイベントが発生します。

1. mousedown マウスボタンが押された
2. mouseup マウスボタンが離された
3. click クリックされた
4. mousedown マウスボタンが押された
5. mouseup マウスボタンが離された
6. click クリックされた
7. dblclick ダブルクリックされた

dblclick 前に click イベントが実行されてしまうため、ondblclick で設定した dblclick イベントが発生しないのではないでしょうか。
もし、click と dblclick の両方を定義するのであれば、
0. click 時にタイマーをセット
0. 一定時間内に再度 click されたら dblclick イベントを実行
0. されなければ click イベントを実行

というような処理を別途、定義する必要があると思います。

参考:
5.4.3 Mouse Event Order

Answer 2

Google Chrome で検証してみましたが、心なしか遅めにダブルクリックすると dblclick が期待通りに発火しました。
特に input[type=checkbox] は反応が鈍く、input[type=button], span の方が反応が良いように思えます。
おそらく、input[type=checkbox] のチェックのON/Offにおける状態変化の待ち時間が必要な処理になっているものと思われます。

<script>
'use strict';
function handleClick (event) {
  console.log(event.type, event.button, event.buttons);
}
function handleDblClick (event) {
  console.log(event.type, event.button, event.buttons);
}
</script>
<label>sample1<input type="checkbox" name="sample1" ondblclick="handleDblClick(event);" onclick="handleClick(event);"></label>
<label ondblclick="handleDblClick(event);" onclick="handleClick(event);">sample2<input type="checkbox" name="sample2"></label>
<input type="button" ondblclick="handleDblClick(event);" onclick="handleClick(event);" value="sambple3">
<span ondblclick="handleDblClick(event);" onclick="handleClick(event);">sample4</span>