[JavaScript] 마우스로 버튼을 클릭할 때와 키보드로 버튼을 클릭할 때를 구분하는 방법


[JavaScript] 마우스로 버튼을 클릭할 때와 키보드로 버튼을 클릭할 때를 구분하는 방법

같은 버튼을 클릭해도 마우스로 클릭할 때와 키보드로 클릭할 때 다르게 동작하도록 구현할 필요가 생겼다. 원래는 키보드를 눌렀을 때 useState()를 통해 boolean state로 관리하려고 했지만, 의도한 대로 동작하지 않았다. 이를 event 객체의 detail을 사용하여 해결했다. event.detail이란? event.detail은 특정 이벤트 내에서 마우스로 버튼을 누른 횟수를 나타낸다. 버튼이 한 번 눌렸다면 1, 더블 클릭을 했다면 2, 그 이상 다중 클릭을 했다면 해당 숫자만큼 표시된다. 아래 각 경우에 해당하는 예시를 보자. 위에서 언급했듯이 특정 이벤트 내에서 마우스로 버튼을 누른 횟수를 나타내기 때문에, 만약 키보드 동작으로 버튼을 클릭한다면 event.detail 값은 0이 나..


원문링크 : [JavaScript] 마우스로 버튼을 클릭할 때와 키보드로 버튼을 클릭할 때를 구분하는 방법