[React] 한 요소에 클릭/더블클릭 이벤트 동시에 거는 법

 

버튼 클릭시 a가, 더블클릭시 b가 실행되야하는데, 더블클릭 시 처음에 클릭 이벤트가 한번 실행 되고 그 다음에 더블클릭 이벤트가 실행되는게 보여서 방법이 없나 하고 찾아봄. 슬쩍 보니까 한 요소에 이렇게 클릭+더블클릭 이벤트를 동시에 거는건 비추한다고 하는거같았음. 중간에 리엑트식 해결방법이 있어서 저장해둠.

 

1. 커스텀 훅 만들기

import { useState, useEffect } from 'react';

function useSingleAndDoubleClick(actionSimpleClick, actionDoubleClick, delay = 250) {
    const [click, setClick] = useState(0);

    useEffect(() => {
        const timer = setTimeout(() => {
            // simple click
            if (click === 1) actionSimpleClick();
            setClick(0);
        }, delay);

        // the duration between this click and the previous one
        // is less than the value of delay = double-click
        if (click === 2) actionDoubleClick();

        return () => clearTimeout(timer);
        
    }, [click]);

    return () => setClick(prev => prev + 1);
}

export default useSingleAndDoubleClick;

const click = useSingleAndDoubleClick(callbackClick, callbackDoubleClick);
<button onClick={click}>clic</button>

 

이렇게 쓰면 된다고 한다. 고마워요 외국개발자~~~~!

 

https://stackoverflow.com/questions/25777826/onclick-works-but-ondoubleclick-is-ignored-on-react-component

onClick works but onDoubleClick is ignored on React component