クリックイベントのみを登録して要素のダブルクリックを検出する方法

Question

イベントを使用できませんdblClickイベントリスナーはclickイベントにのみ追加できます。
clickイベントのみを登録してelement（）のダブルクリックを検出することはできますか？
私は次のようにイベントを追加します。ダブルクリックイベントリスナーを使用することが不可能の場合は

for (var i....)... { 
...addEventListener('click', function(event) 

Answer 1

、あなたは次のクリックが短期間に起こるかどうかをチェックするために、最後のクリックフラグとタイムアウトを使用しようとすることができます。それが起こると、それはダブルクリックの信号です。このような何か：

var dblClickCheck = false; 
var timeout; 

element.addEventListener('click', function() { 

    if(timeout){ 
     clearTimeout(timeout); 
    } 

    if(dblClickCheck){ 
     alert('double click'); 
     return; 
    } 

    dblClickCheck = true; 

    timeout = setTimeout(function() { 
     dblClickCheck = false; 
    }, 200); 

}, false); 

あなたがあなた自身の状況

Answer 2

に応じて、これは動作しますが、あなたのニーズに合わせて、あなたのタイムアウトを調整することができますsetTimeoutの遅延を設定する必要があります。

function makeDoubleClick(doubleClickCallback, singleClickCallback) { 
 
    var clicks = 0, timeout; 
 
    return function() { 
 
     clicks++; 
 
     if (clicks == 1) { 
 
      singleClickCallback && singleClickCallback.apply(this, arguments); 
 
      console.log('single click'); 
 
      timeout = setTimeout(function() { clicks = 0; }, 400); 
 
     } else { 
 
      timeout && clearTimeout(timeout); 
 
      console.log('double click'); 
 
      doubleClickCallback && doubleClickCallback.apply(this, arguments); 
 
      clicks = 0; 
 
     } 
 
    }; 
 
} 
 

 
document.getElementById('btn').addEventListener('click', makeDoubleClick(), false);

<button id='btn'> 
 
    Click Me 
 
</button>

Answer 3

以下のコードは、300ミリ秒後に消え、ボタンにイベントリスナーを追加します。 300 ms以内にボタンが2回押されていないと、内部機能は起動しません。

var button = document.getElementById("dbl_click"); 
 

 
var outerFunction = function(event) { 
 
    button.addEventListener('click', innerFunction); 
 
    setTimeout(function(){ button.removeEventListener('click', innerFunction) }, 300); 
 
}; 
 

 
var innerFunction = function(event) { 
 
    alert("double clicked!"); 
 
} 
 

 
button.addEventListener('click', outerFunction);

<div> 
 
<button id="dbl_click">Double click me!</button> 
 
</div>