jQuery_jquery를 사용하여 마우스 더블클릭을 방지하는 솔루션

소개
사용자가 DOM 개체(예: 버튼, 링크 등)를 두 번 클릭할 때 항상 사용자 상호 작용에 골치 아픈 문제가 있었습니다. 다행스럽게도 jQuery는 매우 훌륭한 솔루션을 제공합니다. 그것은 .one()입니다.

.one() 이 메서드의 기능은 무엇인가요?
요소 이벤트 핸들러를 연결하며 요소당 한 번만 이벤트 핸들러 기능을 실행할 수 있습니다.

매개변수
.one( events [, selector ] [, data ], handler(eventObject) )

events
유형: 문자열
• 요소에 추가할 하나 이상의 이벤트를 지정합니다. 여러 이벤트는 공백으로 구분됩니다. 유효한 이벤트여야 합니다. "클릭" 및 "keydown.myPlugin"과 같습니다.

선택기 매개변수
매개변수 유형: 문자열
•선택기 문자열은 이벤트를 트리거할 수 있는 선택한 요소의 하위 요소를 필터링하는 데 사용됩니다.
•다음과 같은 경우 null을 전달하거나 생략하면 선택한 요소에 도달할 때 이벤트가 트리거됩니다.
데이터
매개변수 유형: 모든 유형
• 이 매개변수의 값은 이벤트가 발생할 때 전달됩니다. 이벤트 핸들러 함수
이벤트 핸들러 함수
매개변수 유형: 함수 유형
•이벤트가 트리거될 때 호출해야 하는 함수
•false도 허용됩니다. false를 반환합니다.
예

코드 복사 코드는 다음과 같습니다.

$("#saveBttn").one("click", function () {
alert("한 번만 표시됩니다.");
}); >

또는

코드 복사 코드는 다음과 같습니다.

$ ("body").one(" click", "#saveBttn", function () {
alert("#saveBttn이 본문에서 가장 먼저 클릭된 경우 표시됩니다.");
}); 위 코드의 핵심은 다음과 같습니다.

•코드 실행이 종료되면 ID가 saveBtn인 요소를 클릭하면 경고 상자가 나타납니다.
•다음 클릭은 아무 효과가 없습니다.
•==>

코드 복사와 같습니다. 코드는 다음과 같습니다.

$("#saveBttn").on("클릭", function (event ) {
alert("한 번만 표시됩니다.");
$(this).off(event);
});

즉, 바인딩된 이벤트 핸들러에서 off()를 명시적으로 호출하는 것과 동일한 효과가 있습니다.

자세한 내용을 보려면
jQuery를 클릭하세요. .one()


요약 위에서 언급한 방법은 jQuery 1.7의 새로운 기능이므로 요소 클릭 이벤트가 두 번 이상 발생하는 경우 이것이 해결책이 될 수 있습니다. 정말 놀라운 방법입니다. 궁금한 점이 있으면 저에게 연락하세요.