웹 개발에서는 더블 클릭 이벤트가 거의 사용되지 않는다고 항상 생각되어 왔습니다. 최근까지 프로젝트에서는 클릭과 더블 클릭이라는 두 가지 이벤트를 버튼에 바인딩해야 했습니다. 처음에는 단지 두 개의 이벤트를 버튼에 묶는 문제라고 생각했는데... 너무 단순하게 생각했다는 것을 나중에 더블클릭 이벤트가 발생하면 클릭도 발생하게 된다는 것을 깨달았습니다~
몇 가지 조사 끝에 JS의 "setTimeout" 지연 실행 메서드를 사용하여 300밀리초 동안 클릭 실행을 지연시켜 문제를 마침내 해결했습니다.
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http ://www.w3.org/1999/xhtml"><머리>
<제목></제목>
<mce:script src="jquery-1.6.min.js" mce_src="jquery-1.6.min.js" type="text/javascript"></mce:script>
<mce:스크립트 유형="텍스트/자바스크립트">
<!--
$(함수 () {
변수 번호 = 0;
var timeFunName = null;
$("button").bind("클릭", function () {
// 마지막 지연 동안 실행되지 않은 메소드 취소
ClearTimeout(timeFunName);
// 클릭을 실행하기 위해 300밀리초 지연
timeFunName = setTimeout(함수 () {
숫자++;
$("textarea").val($("textarea").val() + "th" + num + "번째 이벤트, 이벤트 이름: click/n");
}, 300); }).bind("dblclick", 함수 () {
// 마지막 지연 동안 실행되지 않은 메소드를 취소합니다.
ClearTimeout(timeFunName);
숫자++;
$("textarea").val($("textarea").val() + "th" + num + "번째 이벤트, 이벤트 이름: double-click/n");
});
});
// --></mce:script>
</head>
<본문>
<textarearows="20" cols="50"></textarea><button type="button">제출</button></body></html>