[css] 중첩된 영역 중 뒤에 있는 요소 클릭 이벤트처리 - pointer-events 속성

이런식으로 검은 영역이 클릭 이벤트가 달려있는 슬라이드 배너이고, 그 위에 네비게이션 바를 제작하였다.

(아래는 리액트로 제작한 코드이고, 가독성을 위해 주제와 관련 없는 내용은 지웠다.) 

<Swiper>
<!--스와이퍼 배너이미지-->
  <SwiperSlide key={bannerImg?.ban_id}>
    <Slide>
      <MainSlideImg onClick={() => onClickBanner(bannerImg?.ban_url)} />
    </Slide>
  </SwiperSlide>
<!--네비게이션 버튼 영역-->
  <SwiperNavWrap>
    <SwiperNavBox>
      <SwiperNavL className="prevNav">
        <img src={BannerArrow} alt="prev-arrow" />
      </SwiperNavL>
      <SwiperNavR className="nextNav">
        <img src={BannerArrow} alt="next-arrow" />
      </SwiperNavR>
    </SwiperNavBox>
  </SwiperNavWrap>
</Swiper>

 

하지만 네비게이션 영역이 1240px을 가지고 있기 때문에 해당 분홍색 영역은 배너의 클릭이벤트가 발생하지 못했다.

 

해결방법

클릭 이벤트를 가로막는 곳에 pointer-events 속성을 추가해주면 된다.

pointer-events : 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 지정

 

SwiperNavWrap에 pointer-events: none;을 추가하고,

네비게이션 버튼은 클릭 이벤트가 발생해야 하기 때문에 

SwiperNavL, SwiperNavR에 pointer-events: auto;를 추가해주면 정상적으로 작동한다.