클릭 이벤트 만 등록하여 요소를 두 번 클릭하는 방법

Question

이벤트를 사용할 수 없습니다. dblClickclick 이벤트에만 이벤트 수신기를 추가 할 수 있습니다.
클릭 이벤트 만 등록하면 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 밀리 초 후에 떨어져가는 버튼 이벤트 리스너를 추가한다. 따라서 300ms 이내에 버튼을 두 번 누르지 않으면 내부 기능이 작동하지 않습니다. 당신이 연속으로 빠르게 두 번 클릭을 본 적이 있다면

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>