클릭 이벤트의 발생 순서

최근 진행한 프로젝트에서 click 이벤트 대신 mousedown 이벤트를 사용하여 클릭 관련 문제를 해결하였다.

<form>
  <input />
  <div></div>
</form>

form {
  position: relative;
}
div {
  display: none;
  position: absolute;
  top: 100%;
  ...;
}
form:focus-within div {
  display: block;
}

form 내부의 div는 평소에 display:none으로 보이지 않지만 form에 focus-within 선택자를 이용하여 자신이나 자식이 focus되었을 경우 div를 보이게 하였다.

그리고 이 div요소에 클릭 이벤트를 등록하였는데, 클릭 이벤트가 작동하지 않았다.

focus가 해제되는 blur이벤트가 click이벤트보다 먼저 발생했기 때문이다.

클릭 이벤트는 mousedown과 mouseup이 연달아 발생하는 이벤트로 mousedown -> mouseup -> click 순서대로 발생한다.

mousedown이 감지되면 blur이벤트가 발생하고 div요소에 display:none이 적용된 후 mouseup, click이벤트가 발생하기 때문에 작동하지 않았던 것이였다.

click대신 mousedown에 이벤트를 등록하여 이벤트가 정상적으로 작동하도록 하였다.

Ref

마우스 이벤트