Link 태그 Mouse관련 이벤트 추가시 모바일에서 한번에 링크 되지 않는 현상 수정

발생 현상

• 마우스 오버관련 이벤트가 추가된 <Link>를 모바일에서 클릭시 바로 넘어가지 않고 두번 클릭해야 링크되는 현상 발생
• PC는 전현 문제 없음

발생 원인

• Touch 디바이스에서는 첫 클릭때 onMouseEnter, onMouseOver를 먼저 인식함
• 터치를 쓰기 위해 이벤트를 옮기거나 없애야함

수정 방법

어찌됐던 PC에서는 마우스 이벤트가 필요한 상황이라 

찾아보던 중 비슷한 사례를 발견

 

react-device-detect를 이용하여 접속 기기가 터치식인지 확인 후 

마우스 이벤트에 삼항 연산으로 터치식인 경우 false를 돌려보내 인식하지 못하게 해줌으로 해결

/* 수정 전 */
<Link
	to={'/url'}
    onClick={onClickHandler}
    onMouseEnter={onMouseEnterHandler}
    onMouseLeave={onMouseLeaveHandler}
/>



/* 수정 후 */
import { isMobile, isTablet } from 'react-device-detect';
<Link
	to={'/url'}
    onClick={onClickHandler}
    onMouseEnter={(isMobile || isTablet) ? ()=>false : onMouseEnterHandler}
    onMouseLeave={(isMobile || isTablet) ? ()=>false : onMouseLeaveHandler}
/>

 

참고 사이트

https://www.reddit.com/r/reactjs/comments/arggf9/prevent_onmouseenter_event_from_firing_on_mobile/