click, dblclick 분리로 jQuery를 처리하는 방법

Question

http://abeautifulsite.net/notebook/58에서 jQueryFileTree를 사용하고 있으며 클릭이 항상 dblclick에 의해 트리거되므로 dblclick 및 click 이벤트를 구별하고 싶습니다.

인터넷 검색은 dblclick이 취소하지 않을 때 발동하는 타이머로 클릭을 처리하는 기술로 발전했습니다.

jQuery 및 jQuery 예제와 함께 우아한 방법으로 사용할 수있는 방법이 있습니까?

Answer 1

당신은 타이머 기능을 실현하기 위해 setTimeout() 및 clearTimeout()를 사용할 수 있습니다

var timeout; 
var delay = 500; // Delay in milliseconds 

$("...") 
    .click(function() { 
     timeout = setTimeout(function() { 
      // This inner function is called after the delay 
      // to handle the 'click-only' event. 
      alert('Click'); 
      timeout = null; 
     }, delay) 
    } 
    .dblclick(function() { 
     if (timeout) { 
      // Clear the timeout since this is a double-click and we don't want 
      // the 'click-only' code to run. 
      clearTimeout(timeout); 
      timeout = null; 
     } 
     // Double-click handling code goes here. 
     alert('Double-click'); 
    } 
; 

Answer 2

jQuery를 스파클은 singleclick 사용자 정의 이벤트를 구현하여,이를위한 깨끗하고 우아한 솔루션을 제공합니다. 이렇게함으로써, 당신은 그래서, 다른 모든 이벤트처럼 사용할 수 있습니다

는

$('#el').singleclick(function(){}); 
// or event 
$('#el').bind('singleclick', function(){}); 

또한 클릭 일련의 마지막과 첫 번째 클릭에 대한 사용자 정의 이벤트를 제공합니다. 그리고 lastclick 맞춤 이벤트는 실제 클릭 수를 다시 전달합니다! 그래서 당신은 이것을 할 수있었습니다!

$('#el').lastclick(function(event,clicks){ 
    if (clicks === 3) alert('Tripple Click!'); 
}); 

당신은 적절한 데모 난 그냥 말한 것을 보여주는 찾을 수 here 권리와 사용자 정의 이벤트를 잘 here 정의를위한 소스 코드. AGPL 라이센스하에 오픈 소스이므로 무료로 걱정없이 자유롭게 사용할 수 있습니다! :-) 또한 하루 하루를 적극적으로 개발하므로 지원이 부족하지 않을 것입니다.

하지만 가장 중요한 것은 DRY 플러그인/효과 프레임 워크로 플러그인과 확장 프로그램을 훨씬 더 쉽게 개발할 수 있다는 것입니다. 그래서이 목표를 달성하는 데 도움이되기를 바랍니다! 다음 코드

$("#clickMe").click(function (e) { 
    var $this = $(this); 
    if ($this.hasClass('clicked')){ 
     alert("Double click"); 
     //here is your code for double click 
     return; 
    }else{ 
     $this.addClass('clicked'); 
     //your code for single click 
     setTimeout(function() { 
       $this.removeClass('clicked'); },500); 
    }//end of else 
}); 

데모에서

Answer 3

봐 여기 내가 jQuery를 연습하고 jqueryfiletree.js의 요소에 바인딩을 시도하고있는 예를 에 대한 http://jsfiddle.net/cB484/