[React] hover effect 이벤트함수가 child element에 제대로 적용이 안 될 때 해결방법

💢 onMouseOver 이벤트가 child element에는 적용 안 되고 parent element에만 적용될 때

 

▪에러내용 :

마우스 커서를 메뉴버튼 위에 올렸을 때 버튼이 회색으로 바뀌고, 커서를 떼면 원래 색으로 돌아오도록 이벤트함수를 만들었다. 잘 작동하는 듯 했는데, 자세히 보니까 메뉴버튼에 위치한 svg 아이콘 위에 마우스를 올리면 색이 제대로 안 바뀌는 현상이 발생했다.

메뉴 component 안에 child로 아이콘을 넣어놨으니까, child element에는 parent에 적용된 이벤트함수가 제대로 적용이 안 되는 문제라고 생각하고 해결방법을 찾아봤다.

잘 되는 듯 했으나... 아이콘 위에 커서를 올리니 예상치 못 한 현상 발생

 

▪원인 : e.target 사용

 

▪해결방법: e.currentTarget 사용

function MouseOverUserMenu(e) {
  e.currentTarget.style.background = COLOR.whisperGray;
}

function MouseOutUserMenu(e) {
  e.currentTarget.style.background = COLOR.white;
}

 

 

참고자료

https://stackoverflow.com/questions/38316442/reactjs-mouseout-firing-on-hover-of-child-element