axisj 5 더블클릭시에 일반 onclick이 두번실행되는 현상

[khjzzangs]

안녕하세요 반갑습니다.

현재 axisj 5 그리드를 사용하고 있는데요 body부분에 onclick과 dblclick을 동시에 사용중입니다.

근데 여기서 dblclick을 사용할때 onclick이 두번실행되는것을 확인했는데

onclick을 한번만 실행하거나 혹은 onclick 두번째 실행되기전에 dblclick으로 변경해야되는데

여의치가 않아서 글을 올립니다.

jquery에서 unbind함수가 onclick이벤트의 중복을 막아주던데 어떻게 적용해야하는지 잘 모르겟네요.

좋은 소프트웨어를 잘 활용하고 있습니다. 감사합니다.^^

[thomasJang]

이 현상을 알고는 있는데요. 문제가 dblclick 이 될때 click 이 안터지도록 하려면 꼼수를 써야 가능합니다. 브라우저 이벤트가 그러다 보니.

다음의 링크를 보셔도 이런 꼼수를 사용한다고들 하죠. https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event

예전에 꼼수를 써서 구현 했었는데. 이걸 쓰면 click 이벤트가 바로 안터져서 다른 이슈가 생깁니다. 제 판단으론 click으론 모달창이 열린다는 등의 액션은 배제하는 것이 좋을 것 같습니다.

[hyunjun19]

@thomasJang debounce를 사용하는건 어떨까요?

[thomasJang]

debounce를 사용해서 클릭과 더블클릭을 한군데로 보내고 처리하면 되긴 할 건데요. 문제의 본질이. click 이벤트 반응이 느린것이. 문제라서 클릭와 더블클릭을 함께 선언한 경우에 예외처리를 해야 하나 생각이 드네요. 고민은 해보아야 겠습니다.

[hyunjun19]

@thomasJang onclick이 안터지게 하기는 좀 그런데... 이렇게 처리하면 onclick이 한 번만 호출됩니다. 하지만 이놈도 꼼수...^^;;

/**
 * 
 * @param {function} func The function to call.
 * @param {number} n Occurs after n call.
 * @param {number} wait Wait call and reset hit count.
 * @return {undefined} Allways return undefined.
 */
function nClick(func, n, wait) {
    wait = wait || 100;

    if (typeof func !== 'function') throw new TypeError('[func] Expected a function');
    if (typeof n !== 'number') throw new TypeError('[n] Expected a number');
    if (typeof wait !== 'number') throw new TypeError('[wait] Expected a number');

    var hitCount = 0;

    function startResetCountdown() {
        setTimeout(function(){
            hitCount = 0;
        }, wait);
    };

    return function(){
        hitCount = hitCount + 1;

        var isFirstCall = (hitCount === 1);
        if (isFirstCall) startResetCountdown();

        if (hitCount !== n) return;

        if (typeof func === 'function') func.apply(this, arguments);
    };
}

var oneClick = nClick(function(){ console.log('one clicked~!'); }, 1);
var doubleClick = nClick(function(){ console.log('double clicked~!'); }, 2);

oneClick();
oneClick();
doubleClick();
doubleClick();

음... 클릭와 더블클릭을 함께 선언한 경우 그냥 throw new Errror();을....;;