Blur 관한 문제
검색어를 입력하면 연관 검색어를 보여주는 div 요소를 보여줬다. 하지만 여기서 문제점이 발생했다. 연관 검색어의 담긴 li 태그를 클릭하면 페이지가 이동하는 것이 아닌 페이지는 그대로 있고 연관 검색어가 사라지는 현상이 발생됐다. 원인을 찾느라 정말 고생을 했다.
onMouseDown과 onClick의 차이
다음과 같은 개념만 있으면 쉽게 해결할 수 있는 문제이다.
onMouseDown: 마우스를 누른 상태(손을 떼지 않은 상태)
onClick: 마우스를 누르고 뗀 상태 (손을 뗀 상태)
그러면 위와 같은 문제가 왜 발생했는지 생각해보자. listItem을 클릭할때 사실은 onMouseDown이 먼저 실행이 되서 input의 blur 이벤트가 먼저 발생한 것이다. 해결 방법은 간단하다 listItem의 onClick prop안에 함수는 클릭했을때 어떤 로직을 실행하는 함수가 있다고 가정하면 이 함수를 onMouseDown에 옮겨 놓으면 blur이벤트가 발생하기 전에 함수를 실행 시킬 것 이다.
<li
style={{ cursor: 'pointer' }}
onMouseDown={e => {
handleAutoListItem()
}}
onClick={() => {}}
>
{searchItem.title.replace(/(<([^>]+)>)/gi, '')}
</li>더 알아보기
relatedTarget: 부모 엘리먼트 바깥 영역으로부터 발생한 이벤트 focus 의 entering 과 leaving을 통해 감지
currentTarget: 이벤트 캡처링과 버블링을 통해 감지
둘의 차이를 이해했으면 이제 relatedTarget의 focus를 통해 설명을 하겠다.
relatedTarget은 focus의 leaving과 entering을 감지한다. div와 같은 요소들은 클릭을하면 focus가 되지 않는다. 하지만 다음과 같은 요소들은 focus 이벤트가 발생한다.
- a: href 속성이 명시되어진 태그
- link: href 속성이 명시되어진 태그
- button
- input: hidden이 안된 태그
- select
- textarea
- menuitem
- draggable한 element
- audio, video: control attribute가 명시되어진 태그
위와 같은 태그는 클릭 했을때 focus이벤트가 발생되어서 input의 onBlur이벤트 안에서 event.relatedTarget하면 감지가 된다. 따라서 event.relatedTarget을 이용하여 onBlur안에서 분기처리 할 수 있다.
