DoubleClick Event

꽃

						$(document).ready(function(){
							$("#testBtn1").dblclick(function  () {
								$("img").attr("src", "/florakid_lib/images/sample/sea.jpg").attr("alt","바다");
							});
						});
						

a 태그 설정에 dblclick() 이 작동하지 않는 경우

a 태그에 click 이벤트를 설정하는 경우, 원래의 a 태그에 링크 기능이 무효가 되기 때문에 click(function() {...}) 안의 맨 뒤에 return false:를 추가할 필요가 있습니다.
그렇지만 dblclick()의 경우 return false;를 설정해도 제대도 작동하지 않습니다. dblclick()에 설정한 처리는 더블 클릭이 발생한 타이밍(2회째 클릭 후)에 실행됩니다. 한편 브라우저는 유저가 더블 클릭할 생각으로 클릭한 1회째 클릭 후에 click 이벤트를 감지하고 a 태그의 href 속성에 설정된 링크의 처리를 실행해 버립니다.
여기서 a 태그에 dblclick()을 설정하는 경우는 메서드체인을 이용하여 click()과 dblclick()의 양쪽의 이벤트 처리를 설정합니다. dblclick()에는 더블 클릭시에 실행하고 싶은 처리를, click()에는 return false;를 설정하면 첫 번째 클릭시의 링크는 무효가 됩니다. 아래의 소스코드를 기억해 두면 편리합니다.

a 태그에 단순 dblclick()을 설정한 경우

이미지 전환 단순 설정

꽃

							$(document).ready(function(){
								$("#testClick").dblclick(function  () {
									$("img", ".testImg2").attr("src", "/florakid_lib/images/sample/sea.jpg").attr("alt","바다");
								});
							});								
						

a 태그에 dblclick(), click()를 설정하여 교정한 경우

이미지 전환 교정 후

꽃

							$(document).ready(function(){
								$("#testClick2").dblclick(function () {
									$("img", ".testImg3").attr("src", "/florakid_lib/images/sample/sea.jpg").attr("alt","바다");
								}).click(function () {
									return false;
								});
							});