이벤트 제어(pointer-events) 속성을 통해 팝업창 비활성화

0

---

다음과 같이 버튼을 클릭하면 팝업창이 새로 뜨도록 구현하였다.

하지만 다음과 같이 팝업창 컨테이너의 가시성 여부를 결정해주는 것을 CSS 상의 Opacity를 이용한다면,

.popup-modal.is--visible { //해당 클래스를 추가할 경우 Opacity 값의 변화로 보이게 함
	 opacity: 1;
}

현재 뷰 상에서 요소가 사라져 보이지는 않게 되지만 해당 영역의 이벤트는 응답을 하게 되고 작동한다.

이를 강제로 제어하기 위해서 다음과 같이 pointer-events 속성을 활용하였다.

.popup-modal {
	(...)
     opacity: 0;
	 pointer-events: none; //요소가 보이지 않을 경우에는 이벤트 또한 발생하지 않도록 제어
}

.popup-modal.is--visible {
	 opacity: 1;
	 pointer-events: auto; //요소가 보일 경우에는 이벤트 발생하도록 제어
}

pointer-events: auto는 요소가 poiner-events 속성을 지정하지 않은 것처럼 동작한다. 
poiner-events: none은 요소가 이벤트의 대상이 되지 않는다. 그러나 해당 요소의 자손이 다른 pointer-events 값을 지정한 경우,
그 자손은 대상이 될 수 있다.

 

숨김 처리 속성에 따른 특성

숨김 속성과 값	공간점유	이벤트	탭(Tab) 접근
opacity: 0	점유	활성	가능
visibility: hidden	점유	비활성	불가능
visibility: collapse	테이블 내에서만 비점유	비활성	불가능
display: none	비점유	비활성	불가능

이벤트가 비활성화되는 속성들을 사용하더라도, 트랜지션(전환)이나 애니메이션 같이 프레임별로 진행되는 효과를 요소에 부여하여 숨김 처리를 하는 경우에는 opacity 속성을 사용하는 것이 불가피하다.