jQuery 공작소 : .dblclick()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
dblclick 메서드는 해당요소에 더블클릭 이벤트를 생성하거나 발생시킵니다.
예제 1
더블클릭이벤트 생성하기
보기
얼굴을 더블클릭해 보세요.
소스
<style type="text/css">
.css_test input {
border-radius : 5px;
border : 3px solid gray;
margin-top : 10px;
padding : 7px;
width : 300px;
}
.css_test img {
margin-top : 10px;
width : 150px;
cursor : pointer;
}
</style>
얼굴을 더블클릭해 보세요.<br><br>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
</div>
<script type="text/javascript">
$('.css_test img').dblclick(function(){
j_test(this); // 더블클릭한 이미지 객체를 매개변수로 하여 함수호출
});
function j_test(o){
$(o).attr( 'src', '//superkts.com/img/huk2.gif' );
setTimeout(function(){
$(o).attr( 'src', '//superkts.com/img/huk1.gif' ); // 2초후 원래대로
}, 1000);
}
</script>
.css_test input {
border-radius : 5px;
border : 3px solid gray;
margin-top : 10px;
padding : 7px;
width : 300px;
}
.css_test img {
margin-top : 10px;
width : 150px;
cursor : pointer;
}
</style>
얼굴을 더블클릭해 보세요.<br><br>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
</div>
<script type="text/javascript">
$('.css_test img').dblclick(function(){
j_test(this); // 더블클릭한 이미지 객체를 매개변수로 하여 함수호출
});
function j_test(o){
$(o).attr( 'src', '//superkts.com/img/huk2.gif' );
setTimeout(function(){
$(o).attr( 'src', '//superkts.com/img/huk1.gif' ); // 2초후 원래대로
}, 1000);
}
</script>
관련 CSS
jQuery
$( '.css_test img' ).dblclick( function(){
j_test( this );
} )
- 클래스명이 css_test 인 요소의 이미지에 더블클릭시 j_test 함수에 해당 이미지 요소를 매개변수로 담아 호출하도록 합니다.
예제 2
더블클릭이벤트 발생시키기
보기
버튼을 누르면 아래 이미지에 더블클릭 이벤트를 발생시킵니다.
소스
<style type="text/css">
.css_test input {
border-radius : 5px;
border : 3px solid gray;
margin-top : 10px;
padding : 7px;
width : 300px;
}
.css_test img {
margin-top : 10px;
width : 150px;
cursor : pointer;
}
</style>
버튼을 누르면 아래 이미지에 더블클릭 이벤트를 발생시킵니다.<br><br>
<button type="button" onclick="$('.css_test img').dblclick()">버튼을 눌러보세용</button>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
</div>
<script type="text/javascript">
$('.css_test img').dblclick(function(){
j_test(this); // 더블클릭한 이미지 객체를 매개변수로 하여 함수호출
});
function j_test(o){
$(o).attr( 'src', '//superkts.com/img/huk2.gif' );
setTimeout(function(){
$(o).attr( 'src', '//superkts.com/img/huk1.gif' ); // 2초후 원래대로
}, 1000);
}
</script>
.css_test input {
border-radius : 5px;
border : 3px solid gray;
margin-top : 10px;
padding : 7px;
width : 300px;
}
.css_test img {
margin-top : 10px;
width : 150px;
cursor : pointer;
}
</style>
버튼을 누르면 아래 이미지에 더블클릭 이벤트를 발생시킵니다.<br><br>
<button type="button" onclick="$('.css_test img').dblclick()">버튼을 눌러보세용</button>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
</div>
<script type="text/javascript">
$('.css_test img').dblclick(function(){
j_test(this); // 더블클릭한 이미지 객체를 매개변수로 하여 함수호출
});
function j_test(o){
$(o).attr( 'src', '//superkts.com/img/huk2.gif' );
setTimeout(function(){
$(o).attr( 'src', '//superkts.com/img/huk1.gif' ); // 2초후 원래대로
}, 1000);
}
</script>
관련 CSS
jQuery
$( 셀렉터 ).dblclick() - 해당 셀렉터에 해당하는 요소에 더블클릭 이벤트를 발생시킵니다.
$( '.css_test img' ).dblclick() - 클래스명이 css_test 인 요소의 이미지에 더블클릭 이벤트를 발생시킵니다.
jQuery 홈페이지 .dblclick() API 문서 : http://api.jquery.com/dblclick/