[React , HTML] 겹쳐진 항목클릭시 자식요소 클릭 이벤트 발생시키기

1. 문제발생

답변 2번입니다. 를 자세히보면 위에 그라데이션이 들어간 element가 해당 항목을 덮고있다.

겹치는 요소가 있어서, 저 항목에서만 클릭이벤트가 발생하지 않았다.

2. 문제해결

css 속성중에 'pointerEvents' 라는 항목이 존재한다.

요소에 포인터속성을 관리해주는 속성인데, pointerEvent를 none을 주게되면 포인터 이벤트자체가 사라지게된다.

<S.CustomDiv
    position={'absolute'}
    bottom={0}
    width={'100%'}
    height={'50%'}
    background={'linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));'}
    style={{pointerEvents: 'none'}} //insert
/>

정상적으로 잘 작동한다.