pointer-events

pointer-events: CSS 속성 중에서 강제로 이벤트를 제어할 수 있는 방법

작업을 하다보면 z-index 우선순위가 높고 낮음에 따라 마우스이벤트가 안 먹을 때가 있다. 이럴 경우 z-index를 조정해도 되고, 이벤트를 주고 싶지 않은 항목에 pointer-events를 사용할 수 있다.

 

기본값: 

pointer-events: auto; 기본값

pointer-events: none; 이벤트 대상 아님 

기본적으로 마우스 이벤트를 제어하며 none을 해도 키보드이벤트는 tab을 먹는다.

 

예제:

사용자가 화살표 이미지를 눌렀을 때 옵션이 보이지 않을 수 있다, -> 이미지의 z-index가 선택박스보다 높다.

 

<div class="selectBox">

    <select class="select"> //select = z-index:1;

        <option>선택사항1</option>

        <option>선택사항2</option>

        <option>선택사항3</option>

    </select>

    <span class="icoArrow"></span> //icoArrow - z-index:2;

</div>

 1. select = z-index:3; 으로 지정해준다면 바로 해결됨

2. pointer-events: none;