pointer-event

 

pointer-event 속성을 사용하면 css hover/active 상태, javascript의 click/cursor/mouse 등의 이벤트에 응답하는 방식을 제어할 수 있다.

.avoid-clicks {
  pointer-events: none;
}

pointer-event 속성은 11개의 가능한 값을 사용하지만 몇가지를 제외한 모든 값은 SVG와 함께 사용하도록 예약되어 있다. HTML 요소에 유효한 값은 다음과 같다.

 

/*키워드 값*/
pointer-events: auto; /*비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다.*/
pointer-events: none; /*HTML 요소에 정의된 클릭, 상태 등 커서 옵션들을 비활성화시킨다.*/
pointer-events: visiblePainted; /* SVG 만 */
pointer-events: visibleFill;    /* SVG 만 */
pointer-events: visibleStroke;  /* SVG 만 */
pointer-events: visible;        /* SVG 만 */
pointer-events: painted;        /* SVG 만 */
pointer-events: fill;           /* SVG 만 */
pointer-events: stroke;         /* SVG 만 */
pointer-events: all;            /* SVG 만 */

/*글로벌 값*/
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: unset;

👀 사용 예시

요소 숨김 처리 제어

흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각한다. 대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity 속성을 사용한 경우라면 시각적으로 노출되지는 않지만 해당 영역이 이벤트에 응답이 된다. 이를 강제로 제어하기 위해서 pointer-event 속성을 활용해야 한다.

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

이벤트가 비활성화되는 속성들을 사용하면 좋겠지만, 트랜지션이나 애니메이션처럼 진행되는 효과를 요소에 부여하며 숨김처리를 하는 경우 opacity 속성 외에는 마땅한 방법이 없다. 이러한 경우에 pointer-event 속성을 활용할 수 있다.

.hidden { opacity: 0; pointer-events: none; }

📌 이벤트 위임 제어

<div class="menu">
	<button class="menu-btn" data-value="1">
		<img class="icon" src="./images/ilbuni_0.png" alt="">
		<span class="btn-label">버튼</span>
	</button>
</div>

const menu = document.querySelector('.menu');

function clickHandler(e) {
	let elem = e.target;
	console.log(elem.dataset.value);
}
menu.addEventListener('click', clickHandler);

해당 소스의 console.log를 찍어보면, undefined가 찍히는 시점이 있다.

이는 button영역이 아닌 button영역 내 img나 span을 클릭했을 때 undefined값이 찍힌다. 이 경우, 다른 방식으로 구조를 짜거나 스크립트를 다르게 구현하는 방법이 있겠지만, css 수정만으로 간단하게 해결할 수 있다.

.btn-label {
	pointer-events: none;
}
.icon {
	pointer-events: none;
}

다음과 같이 button영역 내 img나 span에 pointer-event 속성을 추가하여 이벤트 위임을 처리할 수 있다.

💥 pointer-event 속성으로 이벤트 위임을 제어할 때, 하위 요소에 또다른 이벤트를 가진 요소의 경우 이벤트 위임이 막히므로 이러한 경우에는 pointer-event 속성이 아닌 다른 방향으로 처리해야 한다.

const menu = document.querySelector('.menu');

function clickHandler(e) {
    let elem = e.target;
    if(!elem.classList.contains('menu-btn')) {
        elem = elem.parentNode;
        if(elem.nodeName == 'BODY') {
            return;
        }
    }
    console.log(elem)
}

menu.addEventListener('click', clickHandler);

 

참고 사이트

https://velog.io/@moonheekim0118/JavaScript-이벤트-버블링#이벤트-위임-event-delegation

[JavaScript] 이벤트 위임