은 한 번의 클릭 또는 두 번 클릭을 실행합니다. 둘 다 아니야

Question

한 번의 클릭으로 하나의 기능을 실행하고 두 번 클릭하면 다른 기능을 실행해야합니다. 내가 직면하는 문제는 먼저 두 번 클릭하지 않고도 두 번 클릭 이벤트를 가질 수 없다는 사실 때문입니다. 우리가 더블 클릭을 할 때마다 더블 클릭 기능 만이 싱글 클릭 기능을 실행하지 않아야합니다. 아래는 지금까지 내가 해왔 던 일입니다. 아래 코드가 항상 완벽하게 작동하지 않기 때문에 더 좋은 방법이 있는지 제안하십시오.

HTML

<div class='box'> 

JS :

var dblclick = false; 

//single click function 
$('div.box').on('click',function(){ 
    setTimeout(function(){ 
     if(!dblclick){ 
      console.log('singleClick'); 
     } 
    },200); 
}); 

//resetting double click flag 
$('div.box').on('click',function(){ 
    setTimeout(function(){ 
     dblclick = false; 
    },400); 
}); 

//double click function 
$('div.box').on('dblclick',function(){ 
    dblclick = true; 
    console.log('doubleClick') 
}); 

CSS : 같은 당신이 한 시간 제한으로 쉽게 할 수 있다고 생각

div.box { 
    height: 100px; 
    width: 100px; 
    border: 1px solid black; 
} 

Answer 1

:

// where "selector" is your html element selector 
var element = $("selector"), 
    single_click_timeout; 

function clicked(e) { 
    single_click_timeout = setTimeout(function() { 
     // do something for a SINGLE click 
    }, 400); 
} 

function dblclicked(e) { 
    // stop the single click function 
    clearTimeout(single_click_timeout); 

    // do something for a DOUBLE click 
} 

element.on("click", clicked); 
element.on("dblclick", dblclicked); 

트릭은 setTimeout 기능에 대해 정확한 시간을 설정하는 것입니다. 사용자는 클릭 사이에서 1 초의 간격으로 두 번 클릭하지는 않지만 0.01 초 간격으로는 두 번 클릭하지 않는 것이 분명합니다. 이제 더블 클릭에 대해 정확한 밀리 초를 선택해야합니다. 이 작동하는 경우

Answer 2

검사, fiddle demo

$('div.box').prop("disabled", true); 나는 당신이 무엇을 수정할 수 있습니다, 하나는 내가 1000 MS에 클릭에 대한 제한 시간을 유지 한 지점에서 활성화되어 있는지 확인이 줄을 사용하고 있습니다 처럼.

JS 코드 : 잘못된 일을 할 것처럼

//single click function 
$('div.box').on('click',function(){ 
    setTimeout(function(){ 
     if($('div.box').prop("disabled")) return; 
     console.log('singleClick'); 
     $('div.box').prop("disabled", true); 
     //some single click work. 
     $('div.box').prop("disabled", false); 
    },1000); 
}); 

//double click function 
    $('div.box').on('dblclick',function(){  
     if($('div.box').prop("disabled")) return; 
     $('div.box').prop("disabled", true); 
     console.log('doubleClick'); 
     //some work then enable single click again 
     setTimeout(function(){ 
      $('div.box').prop("disabled",false); 
     },2000); 
    });