이벤트 버블링이 되지 않았던 문제 해결하기

아래의 게시물도 참고해서 확인해주시면 좋을 거 같습니다!

마우스 포인터가 요소를 벗어나지 않았음에도 onMouseOut 이벤트가 실행되는 이유 + 해결방법

 

문제상황

---

나는 아이콘에 mouse를 hover했을 때 dropdown 메뉴가 화면에 노출되고, 메뉴 안에 있는 값을 클릭했을 때 해당 값이 선택되도록 구현하고 싶었다.

 

dropdown 메뉴를 구현하기 위해 <div>에게 onMouseOver 이벤트와 onMouseOut 이벤트를 등록한 상황이다. 

 

두 번째로 확인되는 문제점은 아래와 같았다.

참고로 첫 번째로 확인되는 문제점은 위의 게시물에 정리해뒀다.

아이콘에 mouse를 hover했을 때 dropdown 메뉴는 노출되지만, 메뉴 안에 있는 값을 클릭하면 정상적으로 작동되지 않는 문제점이 있었다.

 

 

해결 과정

---

원인은 코드의 순서 때문이였다.

onMouseOver 이벤트가 발생하고 있는 영역이 dropdown 메뉴를 포함하고 있도록 코드를 작성해야 이벤트 버블링이 발생되어 메뉴 안에 있는 값을 정상적으로 클릭할 수 있다.

 

이벤트 버블링이란?

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 작동하고, 이어서 부모 요소의 핸들러가 작동한다. 

가장 최상단의 조상 요소를 만날 때까지(document 객체를 만날때까지) 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 

 

이벤트 발생은 브라우저가 하고, 거의 모든 이벤트는 버블링된다. 

다만, focus 이벤트와 같이 버블링되지 않은 이벤트도 있다. (focus 뿐만 아니라 다른 이벤트들도 있다.)

 

이벤트가 발생하면 이벤트가 발생한 가장 안쪽 요소가 타깃 요소(event.target)이 된다. 

event.currentTarget은 이벤트를 핸들링하는 현재 요소이다. 즉, 핸들러가 실제 할당된 요소이다. 

 

 

다시 문제 상황으로 돌아와서 onMouseOver 이벤트와 onMouseOut 이벤트가 등록된 div 영역이 dropdown 메뉴를 포함하고 있지 않아 dropdown 메뉴 안에 마우스를 hover했을 때 onMouseOut 이벤트가 발생되어 메뉴 안을 클릭할 수 없었던 것이다. 

 

아래와 같이 코드를 작성해주면 dropdown 메뉴 안을 정상적으로 클릭할 수 있고, 콘솔창을 확인해보면 dropdown 메뉴 안에서 마우스를 움직일 때 mouseOver가 출력되는 것을 확인할 수 있다. 

<div
  onMouseOver={() => {
    console.log('mouseOver');
    setIsHover(true);
  }}
  onMouseOut={(e: any) => {
    console.log('Mouse out the element');
    setIsHover(false);
  }}
>
  <Icons icon={faUser} onClick={moveToMyPage} />
  {isHover && <IsHover />}
</div>;

 

1. dropdown 메뉴 안에서 마우스 움직임(자식요소)

2. 부모 요소에 등록한 onMouseOver 이벤트 핸들러 작동

 

 

참고자료

---

• https://ko.javascript.info/bubbling-and-capturing

반응형

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖