pointer-events 는 CSS 속성 중에서 강제로 이벤트를 제어 할 수 있는 방법이다.
작업을 하다보면 z-index 우선순위가 높고낮음에 따라 마우스이벤트가 안먹을때가 있다.
이럴경우 z-index값을 각각 조정해도되지만, 이벤트를 주고싶지않은 항목에 pointer-events 를 사용하면 편하다.
기본값
요소가 포인터 이벤트의 대상이 될 수 있는지 지정한다.
pointer-events: auto; 기본값
pointer-events: none; 이벤트대상 아님
기본적으로 마우스이벤트를제어하며 none을 해도 키보드이벤트 tab는 먹는다.
예제
선택박스는 기본값으로 쓰는곳은 거의없다.
대충만들어보았다.
대부분은 커스텀을 해서 쓰는데, 사용자는 보통 화살표를 눌러본다.
이때 화살표 이미지 부분을 누르면 옵션이 보이지 않는다.
why? 이미지의 z-index가 선택박스보다 높기 때문이다.
<div class="selectBox">
<select class="select"> // select = z-index:1;
<option>선택사항 1</option>
<option>선택사항 2</option>
<option>선택사항 3</option>
<option>선택사항 4</option>
</select>
<span class="icoArrow"></span> // icoArrow - z-index:2;
</div>해결방법
1. z-index를 각각 지정해 우선순위 높여주기
해결 방법은, 화살표보다 select 의 z-index 값을 높게 지정해주어야 한다.
select = z-index:3; 으로 지정해준다면 바로 해결된다.
하지만 이 방법은 일일히 각각 z-index 를 지정해주어야하는 번거로움이 있다.
2. pointer-events: none; 사용하기
이벤트를 주고싶지 않은 요소에 pointer-events: none; 을 사용하면 간단히 해결된다.
나의 경우,
<div class="container">
<div class="swiper"></div> //z-index:1;
<div class="textbox"></div> //z-index:2;
</div>나같은 경우엔 이미지 슬라이드 위에 position으로 텍스트나그라디언트박스가 있어서 해당부분에 드래그시 슬라이드가 안됬다.
원래 의도 : 텍스트박스 고정, 이미지슬라이드 스와이퍼
실행된 결과 : 텍스트박스 부분에 드래그시 슬라이드가 안됨
이는 z-index값을 높여줘도되지만, text-box에 pointer-events : none; 을 사용하면 간단히 해결될 문제였다.
feat. css공부좀 자세히 해야할 필요성을 느꼈다......
