.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="http://biketago.com/img/etc/huk1.gif" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
</div>

<script type="text/javascript">
    $('.css_test img').dblclick(function(){
        j_test(this); // 더블클릭한 이미지 객체를 매개변수로 하여 함수호출
    });

    function j_test(o){
        $(o).attr( 'src', 'http://biketago.com/img/etc/huk2.gif' );
        setTimeout(function(){
            $(o).attr( 'src', 'http://biketago.com/img/etc/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="http://biketago.com/img/etc/huk1.gif" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
</div>

<script type="text/javascript">
    $('.css_test img').dblclick(function(){
        j_test(this); // 더블클릭한 이미지 객체를 매개변수로 하여 함수호출
    });

    function j_test(o){
        $(o).attr( 'src', 'http://biketago.com/img/etc/huk2.gif' );
        setTimeout(function(){
            $(o).attr( 'src', 'http://biketago.com/img/etc/huk1.gif' ); // 2초후 원래대로
        }, 1000);
    }
</script>
관련 CSS
jQuery

$( 셀렉터 ).dblclick()  -  해당 셀렉터에 해당하는 요소에 더블클릭 이벤트를 발생시킵니다.
$( '.css_test  img' ).dblclick()  -  클래스명이 css_test 인 요소의 이미지더블클릭 이벤트를 발생시킵니다.

jQuery 홈페이지 .dblclick() API 문서 : http://api.jquery.com/dblclick/