onClick과 onMousedown의 차이

onClick과 onMousedown의 차이

react test 코드 만드는것을 연습하면서 혼자 select box를 만들다 예전에 작성한 이 글을 참고하게 되었다.

TIL : onBlur때문에 onClick이 실행되지 않을 땐, onMouseDown을 사용

궁금해졌다.

 

왜 onMousedown에 list click event를 할당하지 않고, 굳이 onMousedown으로 e.preventDefault() 시킨 후 onClick으로 click evnet를 할당하는지?

 

mouse를 클릭하고 떼는 동작이 연달아 일어날 때 onClick이 발생하고, 클릭만 했을때는 onMousedown이 발생한다.

 

onMousedown에 click event를 할당하면 유저가 클릭한 행위를 '드래그'로 취소하고자 하는 행위를 할 수 없게 한다.

 

그렇기 때문에 onMousedown에 e.prevetDefault()를 넣어 onBlur를 막고,

click event는 onClick에 할당해야 하는 것이다.

 

---

 

참고

https://ko.javascript.info/mouse-events-basics

마우스 이벤트

https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue#:~:text=To%20illustrate%3A%20when,on%20a%20computer.

onclick() and onblur() ordering issue