[CSS] CSS 이벤트 제어, pointer-events

이벤트가 부여된 요소를 제어하기 위하여 여러가지 방법을 모색할 수 있다.
CSS 속성 중에서 강제로 이벤트를 제어 할 수 있는 방법 pointer-events 라는 속성을 사용할 수도 있다.

pointer-events

pointer-events CSS 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 지정한다.

/* 키워드 값 */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */
/* 전역 값 */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

• none : 요소가 포인터 이벤트의 대상이 되지 않는다. 그러나 해당 요소의 자손이 다른 pointer-events 값을 지정한 경우, 그 자손은 대상이 될 수 있다.
• auto : 요소가 pointer-events 속성을 지정하지 않은 것처럼 행동한다.
• inherit : 부모 요소로부터 pointer-events 값을 상속받는다.

예제

기본 예제

모든 이미지에서 포인터 이벤트(클릭, 드래그, 호버 등)를 비활성화한다.

img {
  pointer-events: none;
}

링크 비활성화하기

다음 예제는 https://example.com으로 통하는 링크의 포인터 이벤트를 비활성화한다.

HTML

<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>

CSS

a[href="http://example.com"] {
  pointer-events: none;
}

위 예제의 결과는 MDN 을 클릭했을 때, MDN 사이트로 연결되어지고
exapmple.com 을 클릭했을 때는, 비활성화를 했기 때문에 링크가 연결되어지지 않는다.

활용해보기, Select Box

select 태그의 기본 디자인 형식은 위와 같이 디자인이 별로 예쁜 편은 아니다.
시각적으로 좀 더 나은 형태로 보여지기 위하여 회사 사이트에 맞게 커스터마이징을 많이 한다.

밑의 사진으로 커스터마이징을 하였다.

화살표는 이미지로 대체해서 넣었다. 이 과정에서 z-index를 간과한다면, 문제점이 발생할 수 있다.
화살표를 position: absoulte 를 사용하여 select box 안에 위치시켜서, z-index 의 값이 select보다 화살표가 더 높아졌다.

여기서의 문제점은, 사용자는 대부분 화살표를 클릭할 것이다.
그런데, 화살표의 z-index 값이 더 높기때문에 select가 가려져서 결과적으로 select가 눌리지 않아 기능이 작동되지 않는다.

해결 방법은, 화살표보다 select 의 z-index 값을 높게 지정해주어야 한다.
결국 이렇게 z-index 를 번거롭게 사용하여 화살표에 가려져서 select 가 눌러지지 않는 현상을 해결할 수 있었다.

( 그런데, pointer-events: none 속성을 활용하면 z-index를 굳이 번거롭게 사용하지 않고도 해결 가능하다. )

우선 z-index로 해결한 코드부터 살펴보자.

HTML

<div class="selectBox">
  <select class="select">
    <option>선택사항 1</option>
    <option>선택사항 2</option>
    <option>선택사항 3</option>
    <option>선택사항 4</option>
  </select>
  <span class="icoArrow"><img src="..." alt=""></span>
</div>

CSS

.selectBox {
  position: relative;
  width: 150px;
  height: 35px;
  border-radius: 4px;
  border: 2px solid royalblue;
}
.selectBox .select {
  width: inherit;
  height: inherit;
  background: transparent;
  border: 0 none;
  outline: 0 none;
  padding: 0 5px;
  position: relative;
  z-index: 3; // z-index 부여 (select가 위로 올라와야 함)
}
.selectBox .select option {
  background: lightcoral;
  color: #fff;
  padding: 3px 0;
  font-size: 16px;
}
.selectBox .icoArrow {
  position: absolute; 
  top: 0; 
  right: 0; 
  z-index: 1; // z-index 부여
  width: 35px; 
  height: inherit;
  border-left: 2px solid lightcoral;
  display: flex;
  justify-content: center;
  align-items: center;
}

z-index 대신, pointer-events: none 을 사용하자.

방금 전에 보았던 CSS에서, z-index를 다 빼고 화살표에 pointer-events: none을 추가하면 된다.

CSS

.selectBox {
  position: relative;
  width: 150px;
  height: 35px;
  border-radius: 4px;
  border: 2px solid royalblue;
}
.selectBox .select {
  width: inherit;
  height: inherit;
  background: transparent;
  border: 0 none;
  outline: 0 none;
  padding: 0 5px;
  position: relative;
}
.selectBox .select option {
  background: lightcoral;
  color: #fff;
  padding: 3px 0;
  font-size: 16px;
}
.selectBox .icoArrow {
  position: absolute; 
  top: 0; 
  right: 0; 
  width: 35px; 
  height: inherit;
  border-left: 2px solid lightcoral;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; 🧚🏻‍♂️
}

REFERENCE

https://developer.mozilla.org/ko/docs/Web/CSS/pointer-events