• Q&A
  • 회원가입
  • 로그인

[Event] JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 = 더블클릭 메서드) ※ 마우스 더블클릭 시 실행.

653  

목차

  1. dblclick() 예제 - p요소 더블클릭 시, 경고창 띄우기
  2. dblclick() 정의
  3. dblclick() 구문
  4. dblclick() 예제 - p요소 더블클릭 시 p요소 숨기기
  5. dblclick() 예제 - div 요소 더블클릭 시 색상 변경

 

dblclick() 예제 - p요소 더블클릭 시, 경고창 띄우기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").dblclick(function(){

    alert("홈페이지 제작관리 강의");

  });

});

</script>


<p>홈짱닷컴 Homzzang.com</p>

 

결과보기

 

dblclick() 정의

 

dblclick 이벤트는 마우스 왼쪽 버튼으로 선택 요소를 더블클릭하면 발생.

※ dblclick() 메서드는 아래 2가지 역할 수행 가능.

① dblclick 이벤트 촉발.

② dblclick 이벤트 발생 시 실행할 함수 부착.

 


 

1.

dblclick 이벤트는 click 이벤트도 생성함.

(∴ 두 이벤트가 동일 요소에 적용된 경우, 문제 생김. )

 

2.

dblclick()에서 dbl은 double 의미.

 

cf. 
① PHP에서 OR 의미하는 || 기호는 (Shift \)키를 두 번 눌러 입력.  
② \ 키는 엔터키 바로 위의 역슬래시 키 의미
 
③ 그누보드 게시판의 분류명 구분하는 | 기호도  (Shift + \)키를 입력

 

 

dblclick() 구문

 

dblclick 이벤트 촉발.

$(selector).dblclick()

 

dblclick 이벤트에 함수 부착.

$(selector).dblclick(function)

 


[매개변수]

 

function

선택. dblclick 이벤트 발생 시 실행할 함수 지정.

 

 

dblclick() 예제 - p요소 더블클릭 시 p요소 숨기기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("p").dblclick(function(){

        $(this).hide();

    });

});

</script>


<p>더블클릭하면 사라져랴! 얏!!</p>

<p>홈짱닷컴 Homzzang.com</p>

<p>HTML CSS JS SQL PHP</p>

 

 

dblclick() 예제 - div 요소 더블클릭 시 색상 변경

 

<style> 

div { background:red; height:100px; width:150px; } 

div.hz { background:yellow;color:black; } 

</style>

 

<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script> 

 

$(document).ready(function(){

  var box = $("#homzzang"); 

  box.dblclick(function () { 

    box.toggleClass('hz'); 

  }); 

});

</script>

 

<div id='homzzang'></div> 


결과 보기



찾아주셔서 감사합니다. Since 2012