onClick과 onMousedown의 차이점

1. 필터가 열린 상태에서
2. 필터 내부의 값을 드래그 한 상태로
3. 마우스를 필터 밖으로 끌고 나가면

필터가 닫히는 버그가 있다는 사실을 알게 되었습니다.
(첨부 gif에서는 마우스 움직임이 잘 보이지 않고 있습니다.😓)
이유는 마우스 이벤트의 실행 시점 때문이었습니다.

🖱️onClick

기존에 사용되고 있던 onClick이벤트는 마우스를 뗄 때 이벤트를 실행합니다.
따라서 클릭을 하고 창 밖에서 마우스에서 손가락을 떼게 된다면 그 시점에 이벤트가 실행되는 것입니다.

🖱️onMouseDown

하지만 onMouseDown는 마우스를 누를 때 이벤트를 실행합니다.
따라서 현재 오류가 있는 상황에 고칠 수 있는 방법입니다.

그 외 마우스 이벤트 종류

• onMouseUp 
  - 사용자가 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생합니다.
• onDoubleClick 
  - 사용자가 해당 element에서 마우스 버튼을 더블 클릭했을 때 발생합니다.
• onMouseMove 
  - 사용자가 해당 element에서 마우스를 움직였을 때 발생합니다.
• onMouseOver 
  - 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다.
• onMouseOut 
  - 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다.
• onMouseEnter 
  - 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다.
  - 버블링이 발생하지 않습니다.
• onMouseLeave 
  - 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다.
  - 버블링이 발생하지 않습니다.
• onContextMenu 
  - 마우스 오른쪽 버튼을 눌렀을 때 발생합니다.

습관적으로 onClick 이벤트를 자주 사용하고 있었는데, 다양한 마우스 이벤트 핸들러를 다시 한 번 숙지할 수 있었습니다.