jq jq 싱글클릭과 더블클릭 구별 예제 소개_기본지식

1: 원리:

먼저 클릭 이벤트의 실행 순서를 살펴보세요:

클릭(클릭): mousedown, mouseout, click
더블 클릭(dblclick; ) : mousedown, mouseout, click, mousedown, mouseout, click, dblclick

더블 클릭 이벤트(dblclick)에서는 트리거된 두 개의 클릭 이벤트(클릭) 중 첫 번째 클릭 이벤트(클릭)가 발생합니다. 차단되지만 두 번째는 차단되지 않습니다. 즉, 더블 클릭 이벤트(dblclick)는 클릭 이벤트(click)의 결과와 더블 클릭 이벤트(dblclick)의 결과를 반환합니다. 두 번 클릭 이벤트(dblclick)의 결과와 두 번의 클릭 이벤트(click)의 결과 대신.

이런 경우에는 추가 클릭 이벤트(클릭)만 없애주시면 문제가 해결됩니다.

setTimeout

2: 코드:

코드 복사 코드 다음과 같습니다:

//setTimeout 실행 방법 정의
var TimeFn = null

$('div').click(function () {
// 취소 마지막 지연 동안 실행되지 않은 메서드
clearTimeout(TimeFn);
//실행 지연
TimeFn = setTimeout(function(){
//Do 함수가 여기에 클릭 이벤트를 기록합니다. 실행된 코드
},300);
})

$('div').dblclick(functin () {
// 마지막 지연 동안 실행되지 않은 메소드 취소
clearTimeout(TimeFn)
//더블클릭 이벤트 실행 코드
})