jquery에서 더블클릭 이벤트만 발생하게 하는 방법-프런트엔드 Q&A-php.cn

jquery에서 더블클릭 이벤트만 발생하게 하는 방법

PHPz

풀어 주다： 2023-04-26 15:50:04

원래의

754명이 탐색했습니다.

웹 개발에서는 페이지 상호 작용 효과를 얻기 위해 jquery가 자주 사용됩니다. 그 중 더블클릭 이벤트와 클릭 이벤트는 불가피합니다. 그런데 더블클릭 이벤트가 두 개의 클릭 이벤트를 발생시키는 경우가 가끔 발견되는데 이때는 클릭 이벤트 발생을 방지하고 더블클릭 이벤트만 발생하도록 허용해야 합니다. 그렇다면 어떻게 달성해야 할까요?

먼저 jquery의 이벤트 바인딩 방법을 이해해야 합니다. 이벤트 바인딩에는 두 가지 방법이 있는데, 하나는 bin() 메서드를 사용하여 바인딩하는 것이고, 다른 하나는 on() 메서드를 사용하여 바인딩하는 것입니다. 이 두 메서드는 본질적으로 동일합니다. on() 메서드는 업그레이드된 버전의 bin() 메서드로, 동적 요소에 대한 지원을 추가합니다. 이 두 가지 방법을 통해 더블클릭 이벤트 바인딩을 구현할 수 있습니다.

구체적인 구현 방법은 다음과 같습니다.

bind() 메서드를 사용하여 더블 클릭 이벤트와 클릭 이벤트를 바인딩합니다.

$("#element").bind({
    click: function() {
        //单击事件的处理逻辑
    },
    dblclick: function() {
        //双击事件的处理逻辑
    }
});

로그인 후 복사

이 메서드는 실제로 개체를 정의하고 click 및 dblclick 이벤트를 바인딩합니다. 그런 다음 해당 처리 논리 기능이 각각 제공됩니다.

더블 클릭 이벤트와 클릭 이벤트를 바인딩하려면 on() 메서드를 사용하세요.

$("#element").on("click", function() {
    //单击事件的处理逻辑
}).on("dblclick", function() {
    //双击事件的处理逻辑
});

로그인 후 복사

이 메서드는 먼저 클릭 이벤트를 바인딩한 다음 dblclick 이벤트를 체인으로 바인딩합니다. 또한 해당 처리 논리 기능을 각각 제공해야 합니다.

위의 두 가지 방법에서 더블클릭 이벤트가 클릭 이벤트 다음에 바인딩되는 것을 확인할 수 있습니다. 더블클릭 이벤트가 클릭 이벤트보다 먼저 바인딩된 경우 사용자가 더블클릭을 하면 더블클릭 이벤트가 먼저 트리거되고 클릭 이벤트가 두 번 트리거되기 때문입니다. 이는 클릭 이벤트를 금지하는 효과를 얻지 못합니다.

다음으로 더블클릭 이벤트 처리 로직 함수에서 클릭 이벤트 트리거를 비활성화해야 합니다. 구체적인 작업은 setTimeout() 함수를 사용하여 일정 시간 후에 클릭 이벤트가 실행되도록 하는 것입니다. 이 기간 내에 사용자가 다시 클릭하면 마지막 setTimeout() 함수가 지워지고 새 setTimeout() 함수가 재설정됩니다. 이런 방식으로 클릭 이벤트의 영향은 지워지고 더블 클릭 이벤트의 영향만 유지됩니다.

구체적인 구현 코드는 다음과 같습니다.

var timer = null;
$("#element").bind({
    click: function() {
        var that = this;
        clearTimeout(timer);
        timer = setTimeout(function() {
            //单击事件的处理逻辑
        }, 200);
    },
    dblclick: function() {
        clearTimeout(timer);
        //双击事件的处理逻辑
    }
});

로그인 후 복사

위 코드에서는 나중에 지울 수 있도록 setTimeout() 함수의 반환 값을 저장하는 타이머 변수를 정의합니다. 클릭 이벤트 처리 논리 함수에서 먼저 마지막 setTimeout() 함수를 지운 다음 새 setTimeout() 함수를 설정하여 클릭 이벤트 실행을 200밀리초만큼 지연시킵니다. 더블클릭 이벤트 처리 로직 함수에서 마지막 setTimeout() 함수를 클리어한 후 더블클릭 이벤트를 실행합니다. 이렇게 하면 클릭 이벤트가 비활성화됩니다.

주의할 점은 setTimeout() 함수의 시간 간격은 실제 상황에 따라 조정해야 한다는 점입니다. 테스트 후 설정하는 것이 가장 좋습니다.

요약하자면 다음 방법을 사용하여 클릭 이벤트를 비활성화할 수 있습니다.