두 번 클릭 이벤트가 감지되면 클릭/마우스 업 이벤트를 취소해야합니다.

Question

어떻게 처리하나요?

Answer 1

이것은 좋은 질문이며, 실제로는 쉽게 할 수 있다고 생각하지 않습니다.

function singleClick(e) { 
    // do something, "this" will be the DOM element 
} 

function doubleClick(e) { 
    // do something, "this" will be the DOM element 
} 

$(selector).click(function(e) { 
    var that = this; 
    setTimeout(function() { 
     var dblclick = parseInt($(that).data('double'), 10); 
     if (dblclick > 0) { 
      $(that).data('double', dblclick-1); 
     } else { 
      singleClick.call(that, e); 
     } 
    }, 300); 
}).dblclick(function(e) { 
    $(this).data('double', 2); 
    doubleClick.call(this, e); 
}); 

을 그리고 여기에 example of it at work입니다 :이 기능을 갖는 것이 슈퍼아요 중요한 경우 (Some discussion on this)

, 그렇게처럼 해킹 수 있습니다.

덧글에서 지적한대로, 내가 위에 한 일을 수행하는 플러그인이 있지만 추한 것을 볼 필요가 없도록 꾸러미를 포장합니다. FixClick.

Answer 2

다른 답변에서 설명한 기술은 debouncing입니다.

Answer 3

레이몬드 첸 (Raymond Chen)은 Windows의 컨텍스트에서 말하고 있지만 브라우저 기반 UI 디자인과 관련이 있다고 말하면서 일부는 implications of single-versus-double clicking에 대해 논의했습니다.

기본적으로 두 번 클릭 한 동작은 한 번의 클릭으로 수행해야하는 논리적 작업입니다. 예를 들어, 데스크탑 UI에서 한 번 클릭하면 항목이 선택되고 두 번 클릭하면 열립니다 (예 : 파일을 열거 나 응용 프로그램을 시작). 사용자는 파일을 선택하여 어쨌든 열어야하므로 더블 클릭 동작 전에 한 번의 클릭 동작 만 수행해도 상관 없습니다.

두 번 클릭 동작이 한 번 클릭 동작과 완전히 관련이없는 UI 구성 요소가있는 경우 시스템에서 실제로 한 번 클릭하면 두 번 클릭 한 번 클릭 동작이 발생하지 않도록해야합니다. 당신의 디자인을 재고해야합니다. 사용자는 행동에 익숙한 방식으로 행동하지 않으므로 어색하고 반 직관적입니다.

그런 식으로 가고 싶다면 디 바운싱 기술 (모든 단일 클릭 동작이 지연 될 것임)을 사용해야하거나 그렇지 않으면 두 번 클릭 처리기가 수행 한 작업을 취소하는 일부 메커니즘을 구현해야합니다. 단일 클릭 핸들러.

일부 사용자는 매우 긴 두 번 클릭 시간을 설정합니다. 예를 들어, 관절염 환자의 손에는 시스템 환경 설정에서 두 번째 클릭 시간보다 두 배 이상의 클릭 시간이있을 수 있으므로 사용자가 선택한 임의의 시간대를 기반으로하는 디버깅 기법은 해당 사용자가 UI 구성 요소에 액세스 할 수 없도록 만듭니다. 단일 클릭 동작을 취하는 것은 더블 클릭 동작을 취하지 못하게합니다. 내가 아는 한 "한 번 클릭했을 때 일어난 일을 취소"기술 만이 가능한 유일한 해결 방법입니다.

Answer 4

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

는

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

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

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

사용자 지정 이벤트 here을 정의하는 소스 코드를 찾을 수 있습니다.

오픈 소스이므로 AGPL 라이센스를 통해 자유롭게 걱정없이 자유롭게 사용할 수 있습니다!:-) 또한 하루 하루를 적극적으로 개발하므로 지원이 부족하지 않을 것입니다.

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

Answer 5

양식을 제출하는 버튼 인 경우 (원래의 포스터의 경우는 아니지만 다른 사용자가 Google을 통해 다른 사람들에게 전달할 수 있음) 더 쉬운 옵션은 해당 요소를 사용 중지하는 것입니다. 클릭 이벤트 처리기에서 클릭하는 경우 :

$(selector).click(function(e) { 
    $(this).prop('disable', true); 
}