코딩이 즐겁다

[jQuery] 마우스 더블 클릭 이벤트의 모든 것 갓벽 가이드 본문

Jquery

[jQuery] 마우스 더블 클릭 이벤트의 모든 것 갓벽 가이드

코즐 2025. 3. 9. 17:08
반응형
반응형

 

dblclick 이벤트는 사용자가 요소를 더블 클릭(빠르게 두 번 클릭) 했을 때 실행되는 이벤트입니다. 주로 특정 동작을 빠르게 실행하거나, 한 번의 클릭과 구분되는 기능을 만들 때 사용됩니다.

 

 

기본 사용법

$(selector).dblclick(function() {
    // 실행할 코드
});

✅ 버튼 더블 클릭 시 알림창 띄우는 예제 코드:

$("#btn").dblclick(function() {
    alert("버튼이 더블 클릭되었습니다!");
});

이 코드를 실행하면 #btn 버튼을 두 번 빠르게 클릭했을 때 경고창이 뜨게 됩니다.

 

 

on() 메서드를 사용한 이벤트 바인딩

동적으로 생성된 요소에도 dblclick 이벤트를 적용하려면 .on() 메서드를 사용해야 합니다.

$(parentSelector).on("dblclick", childSelector, function() {
    // 실행할 코드
});

✅ 동적으로 추가된 버튼에도 더블 클릭 이벤트 적용 예제 코드:

$(document).on("dblclick", ".dynamic-btn", function() {
    alert("동적으로 생성된 버튼이 더블 클릭되었습니다!");
});

이렇게 하면 페이지 로드 후 새로 추가된 .dynamic-btn 요소에도 dblclick 이벤트가 적용됩니다.

 

 

dblclick 이벤트 제거 (off())

등록한 dblclick 이벤트를 제거하려면 .off("dblclick")을 사용하면 됩니다.

$(selector).off("dblclick");

✅ 버튼에서 더블 클릭 이벤트 제거하는 예제 코드:

$("#btn").off("dblclick");

이렇게 하면 #btn에 등록된 dblclick 이벤트가 제거되어 더블 클릭해도 반응하지 않습니다.

 

 

기본 동작 막기 (preventDefault())

일반적으로 dblclick 이벤트는 기본 동작이 없지만, <a> 태그처럼 기본 동작이 있는 요소에서는 방지할 수 있습니다.

$("a").dblclick(function(event) {
    event.preventDefault(); // 링크 이동 방지
    alert("링크 더블 클릭이 방지되었습니다!");
});

 

 

이벤트 전파 막기 (stopPropagation())

dblclick 이벤트가 부모 요소로 전파되는 걸 막으려면 stopPropagation()을 사용하면 됩니다.

$(".child").dblclick(function(event) {
    event.stopPropagation(); // 부모 요소로 이벤트 전달 방지
    alert("자식 요소 더블 클릭!");
});
$(".parent").dblclick(function() {
    alert("부모 요소 더블 클릭!");
});

위 코드에서 .child를 더블 클릭하면 .parent의 dblclick 이벤트는 실행되지 않습니다.

✅ stopPropagation() 이해를 돕는 예제 코드:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
	$(document).ready(function() {
		$(".child").dblclick(function(event) {
		    event.stopPropagation(); // 부모 요소로 이벤트 전달 방지
		    alert("자식 요소 더블 클릭!");
		});

		$(".parent").dblclick(function() {
		    alert("부모 요소 더블 클릭!");
		});
	});
  </script>
</head>
<body>
	<div class="parent" style="width: 200px;height: 200px;background-color:green;">
		<div class="child" style="width: 100px;height: 100px;background-color:yellow;"></div>
	</div>
</body>
</html>

🎯 실행 결과:

jquery dblclick stopPropagation example
jquery dblclick stopPropagation example

 

위의 예제를 실행하면 부모 영역(초록색) 안에 자식 영역(노란색)을 포함하고 있습니다.

stopPropagation() 메서드를 사용하지 않았다면 부모 영역을 더블 클릭했을 경우에는 .parent에 적용되어 있는 더블 클릭 이벤트가 실행되고, 자식 영역을 더블 클릭했을 경우에는 .child에 적용되어 있는 더블 클릭 이벤트가 실행되고 .parent 영역의 더블 클릭 이벤트가 차례대로 실행될 것입니다.

따라서 자식 영역(노란색)을 더블 클릭했을 때 .child의 더블 클릭 이벤트만 실행하고 싶다면 stopPropagtion() 메서드를 사용하면 됩니다.

 

 

this 키워드 활용

this를 사용하면 더블 클릭된 요소를 가리킬 수 있습니다.

$(".item").dblclick(function() {
    $(this).css("background-color", "yellow");
});

이렇게 하면 .item 요소를 더블 클릭했을 때 해당 요소의 배경색이 노란색으로 변경됩니다.

 

클릭 이벤트 한 번만 실행하기 (one())

한 번만 실행되도록 하려면 .one()을 사용할 수 있습니다.

$("#btn").one("dblclick", function() {
    alert("이 버튼은 한 번만 더블 클릭할 수 있습니다!");
});

이렇게 하면 #btn 버튼을 한 번 더블 클릭한 후에는 다시 더블 클릭해도 반응하지 않습니다.

 

dblclick() 메서드를 사용하여 강제 클릭

dblclick()을 호출하면 실제로 더블 클릭하지 않아도 이벤트를 실행할 수 있습니다.

$("#btn").dblclick();

위 코드를 실행하면 #btn 요소의 dblclick 이벤트가 강제로 실행됩니다.

 

반응형
저작자표시 비영리 변경금지

'Jquery' 카테고리의 다른 글

[jQuery] $(document).ready() vs window.onload 차이 갓벽 가이드  (13) 2025.03.10
[jQuery] $(document).ready() 개념과 사용법 갓벽 가이드  (15) 2025.03.10
[jQuery] click 이벤트 활용의 모든 것 갓벽 가이드  (19) 2025.03.08
jquery 란, 제이쿼리 사용 방법 갓벽 가이드  (55) 2025.02.27
'Jquery' Related Articles more