js - click & dbclick 동시 사용 방법

js - click & dbclick 동시 사용 방법

---

이벤트를 적용하다보면 같은 대상에 클릭과 더블클릭 이벤트를 적용해야되는 일이 생긴다.

이때  $('#id').click 과 $('#id').dbclick 과 같이 이벤트를 따로 선언해서 사용하면 더블클릭 이벤트가 처리가 안된다.

 

해결방법은 on() 함수와  타이머관련 함수들을 이용하여 해결이 가능하다.

 

 

 

Code

---

코드는 다음과 같다.

<script>
    var DELAY = 200, timer = null, clickCnt = 0;
    
    var funcClick = function() {
        console.log('click');
        clickCnt = 0;
        var theDiv = document.getElementById('abc');
        theDiv.innerHTML = 'single click';
    };
    
    var funcDblClick = function() {
        clearTimeout(timer);
        console.log('dbl click');
        clickCnt = 0;
        var theDiv = document.getElementById('abc');
        theDiv.innerHTML = 'double click';
    };
    
    $("#abc").on('click', (e) => {
        clickCnt++;
        if (clickCnt === 1) {
            // click
            timer = setTimeout(funcClick, DELAY);
        } else {
            // double click
            funcDblClick();
        }
    }).on('dblclick', (e) => {
        e.preventDefault();
    });
    </script>

 

설명

---

먼저 클릭할 대상을 만든다.

<div id = "abc" style="width: 300px; height: 50px; background-color: red;">

.

제이쿼리를 이용하여 클릭 이벤트와 더블클릭 이벤트를 선언해준다.

클릭 이벤트 발생시 클릭카운트를 증가시켜 클릭 한번시 if문이 실행되며 setTimeout 함수를 통해서 Click 함수가 실행 후 다시 카운트를 0 으로 만든다.

 

더블클릭 이벤트 발생시 기존 더블클릭 이벤트는 preventDefault() 를 통해 제어해주고 클릭카운트로 else 문을 통하여 마치 더블클릭 이벤트가 발생하듯이 동작하는 방법이다. setTimeout을 통하여 기존 클릭이벤트를 종료시키고 else문의 더블클릭 함수를 실행한다.

$("#abc").on('click', (e) => {

        clickCnt++;

        if (clickCnt === 1) {

            // click

            timer = setTimeout(funcClick, DELAY);

        } else {

            // double click

            funcDblClick();

        }

    }).on('dblclick', (e) => {

        e.preventDefault();

    });

클릭과 더블클릭 함수에 원하는 동작을 선언하면 된다. 그리고 카운트를 0으로 다시 초기화 시켜준다.

DELAY 변수를 통해 시간 조절이 가능하다.

var DELAY = 200, timer = null, clickCnt = 0;

    

    var funcClick = function() {

        console.log('click');

        clickCnt = 0;

        var theDiv = document.getElementById('abc');

        theDiv.innerHTML = 'single click';

    };

    

    var funcDblClick = function() {

        clearTimeout(timer);

        console.log('dbl click');

        clickCnt = 0;

        var theDiv = document.getElementById('abc');

        theDiv.innerHTML = 'double click';

    };

 

 

 

주의사항

---

혹시나 이 스크립트를 head 태그 부분에 넣게 되면 작동을 하지 않는다. body에 선언한 div가 그려져야 테스트가 가능하므로 하단에 설정해주도록 하자. 이 외에는 자신에 상황에 맞게 내용을 추가해서 사용하면 된다.

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."