[TIL] 2024/02/21

Today I Learned

:focus 를 사용해서 popover 버튼 만들기

구현 목표

• 버튼을 누르면 보이지 않던 팝오버 형태의 콘텐츠가 화면에 보여진다.
• 버튼을 누르고 콘텐츠를 화면에 띄운 뒤에 다시 버튼을 누르거나, 콘텐츠 영역 외의 부분을 누르면(콘텐츠 영역을 누르면 특정 url로 이동하고 결국은 닫힌다) 콘텐츠가 화면에서 다시 사라진다.

필요한 사전 지식

• :focus : 특정 엘리멘트를 클릭하거나, tab 하여 해당 엘리멘트에 접근했을 때, focused 상태로 본다. 이 때, :focus는 이러한 상태를 표현하는 pseudo-class이다.
• blur() : 현재 focused 인 element에서 focus를 제거한다.
• activeElement : 현재 dom이 focus 하고 있는 element를 리턴한다(document.activeElement).

몰랐던 것

• onClick으로 blur() 이벤트를 호출하려고 했는데, 생각해보니 css에 :focus 수도 클래스를 이용해서 popover contents를 보이게 했다가 안보이게 했다가 할건데, 동일한 이벤트인 onClick에 blur처리하는 로직을 넣으면 두 로직(보이게하고, 안보이게하고)이 충돌하게 된다. 따라서, onClick 보다 빨리 동작하는 onMouseDown에 이벤트 핸들러를 등록한다.
• onMouseDown 시점에 blur() 를 바로 호출하면 click 이벤트가 발생할 때, 즉, :focus 부분의 로직이 적용되기 전에 호출이 되고, blur()가 됐다가, click 이벤트에 따라 다시 focused 상태가 돼서 화면에 콘텐츠가 다시 보이게 된다. 따라서, setTimeout으로 약간의 지연을 줘서 실행해준다.

구현 내용

MouseDown vs OnClick

onMouseDown -> onMouseUp -> onClick 순서로 이벤트가 발생한다.