아래와 같은 Pagination UI 컴포넌트 개발시 이상한 이슈를 겪었다.
문제 상황
페이지를 입력하는 input 창에 Blur 이벤트가 걸려 있고, 양쪽의 Prev와 Next 버튼에 Click 이벤트가 걸려 있는 상황이었다.
그런데 양쪽 버튼 클릭시 이벤트가 발생하지 않았다.
확인해보니 사용자가 input에 데이터를 입력 후 버튼을 클릭 했을 때 Click 이벤트 보다 Blur 이벤트가 먼저 발생해서 생기는 이슈였다.
해결 방법
버튼에 Mousedown 이벤트를 걸고 Mousedown 이벤트 발생시 preventDefault를 실행해 Blur 이벤트가 발생하지 않도록 처리하면 된다.
각각의 이벤트가 어떻게 발생하는지 확인하고 싶어서 Code Pen으로 간단하게 코드를 작성해 봤다.
Blur, Mousedown, Click 이벤트 확인 Code Pen
