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

StackOverflow https://stackoverflow.com/questions/1067464

문제

이게 어떻게 끝났어?

도움이 되었습니까?

해결책

이것은 좋은 질문이며, 실제로 쉽게 할 수 있다고 생각하지 않습니다. (이것에 대한 약간의 토론)

이 기능을 갖는 것이 매우 슈퍼 듀퍼라면 그렇게 해킹 할 수 있습니다.

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);
});

그리고 여기에 있습니다 직장에서의 예.

주석에서 지적한 바와 같이, 내가 한 일을 거의 수행하는 플러그인이 있지만, 당신을 위해 그것을 포장하여 추악한 것을 볼 필요가 없습니다. 고정 클릭하십시오.

다른 팁

Raymond Chen은 일부를 논의했습니다 단일 버스 더블 클릭의 시사점 - 그는 Windows의 맥락에서 이야기하고 있지만 브라우저 기반 UI 디자인과 관련이 있습니다.

기본적으로, 더블 클릭으로 취한 조치는 한 번의 클릭 후에해야 할 논리적 일이어야합니다. 예를 들어, 데스크탑 UI에서 단일 클릭이 항목을 선택하고 두 번 클릭이 열립니다 (예 : 파일을 열거나 응용 프로그램을 시작합니다). 사용자는 어쨌든 파일을 열어야하므로 파일을 열어야하므로 두 번 클릭 작업 전에 단일 클릭 조치를 취하는 것은 중요하지 않습니다.

이중 클릭 액션이 단일 클릭 조치와 완전히 관련이없는 UI 구성 요소가있는 경우 시스템이 실제로 더블 클릭이라는 것을 깨닫고 일단 단일 클릭 조치가 발생하지 않도록해야합니다. 설계. 사용자는 어색하고 반 직관적 인 것을 알게 될 것입니다.

여전히 그런 식으로 가고 싶다면 Decouncing 기술을 사용해야하거나 (이 경우 모든 단일 클릭 조치가 지연 될 것입니다), 그렇지 않으면 Double Click Handler가 단일 클릭 핸들러에서 수행 한 작업을 취소하는 메커니즘을 구현해야합니다. .

또한 일부 사용자는 매우 긴 두 번 클릭 시간을 설정한다는 것을 알고 있어야합니다. 예를 들어, 관절염 손을 가진 사람은 시스템 환경 설정에서 두 번째 세트 이상의 두 번 클릭 시간을 가질 수 있으므로 선택한 임의의 임의 기간을 기반으로 한 데 모딩 기술은 UI 구성 요소에 접근 할 수 없게됩니다. 단일 클릭 액션을 취하면 더블 클릭 작업을 수행하는 것이 배제됩니다. "Single Click에서 방금 일어난 일을 취소"기술은 내가 아는 한 유일한 실행 가능한 해결 방법입니다.

다른 답변에 요약 된 기술은 다음과 같습니다. 디포 킹.

JQuery Sparkle은 단일 클릭 커스텀 이벤트를 구현하여 깨끗한 우아한 솔루션을 제공합니다. 이렇게하면 다른 이벤트와 마찬가지로 사용할 수 있습니다.

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

또한 일련의 클릭의 마지막 클릭 및 첫 클릭에 맞는 사용자 정의 이벤트를 제공합니다. 그리고 Last Click 사용자 정의 이벤트는 실제로 클릭 수를 뒤로 전달합니다! 그래서 당신은 이것을 할 수 있습니다!

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

사용자 정의 이벤트 정의를위한 소스 코드를 찾을 수 있습니다. 여기.

AGPL 라이센스에 따른 오픈 소스이므로 걱정없이 필요한 것을 자유롭게 잡을 수 있습니다! :-) 그것은 또한 매일 매일 적극적으로 개발되므로 지원이 부족하지 않을 것입니다.

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

이것이 양식을 제출하는 버튼 (원본 포스터의 경우는 아니지만 Google을 통해 여기에 도착하는 다른 사람들의 경우가 될 수 있음)을 제출하는 경우 더 쉬운 옵션은 클릭중인 요소를 비활성화하는 것입니다. 클릭 이벤트 핸들러 :

$(selector).click(function(e) {
    $(this).prop('disable', true);
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top