본문으로 바로가기

CSS 이벤트 제어(pointer-events ) 속성

category 웹코딩/CSS 2016.02.01 11:00

흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각합니다. 대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity 속성을 이용한 경우라면 가시성은 없지만 해당 영역의 이벤트에 응답하게 됩니다. 이를 강제로 제어하기 위해서는 pointer-events 속성을 활용해야 하며 관련하여 아래에서 추가적인 정보를 서술하였습니다.

숨김 처리 속성에 따른 특성

요소를 숨길때 사용하는 CSS 속성은 제각기 고유의 특성을 지니고 있다. 아래의 표를 참고하자.

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

이벤트가 비활성되는 속성들을 사용하면 좋겠지만, 트랜지션(전환)이나 애니메이션 같이 프레임별로 진행되는 효과를 요소에 부여하여 숨김처리를 하는 경우, opacity 이외에는 맞당한 방법이 없다. 설상가상으로 해당 요소가 고정된 위치를 부여받을 경우(ex. position: fixed) 해당 요소는 원치않는 이벤트를 발생시킬 위험도가 높아진다.

point-events 속성

위와 같이 어떤 경우에는 요소에 부여된 이벤트를 제거하거나 다시 활성화 시켜야하는 경우가 생길 수 있다. pointer-events 는 HTML 요소들의 마우스/터치 이벤트들(CSS hover/active, JS click/tap, 커서 드래그등)의 응답을 조정할 수 있는 속성이다.

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

pointer-events 속성은 11개의 속성값을 가지지만 3개를 제외하고는 모두 SVG에서 사용하도록 예약되어 있다. 아래의 3개의 속성값은 HTML 요소들에서 사용 가능하다.

  • none : HTML 요소에 정의된 클릭, 상태(hover,active등), 커서 옵션들이 비활성화한다.
  • auto : 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다.
  • inherit : 부모 요소로부터 pointer-events 값을 상속받는다.

나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라.

이 요소를 통과해서 드래그 가능
IE9와 IE10에서 pointer-events가 작동하지 않기때문에 visibility: hidden 값과 함께 사용하는 것을 고려하도록 하자.



댓글을 달아 주세요

  1. 용이 2016.05.19 11:50 신고

    공부 잘하고 있습니다. 감사합니다.
    지나가다가... '맞당한' 아니라 '마땅한' 입니다....

  2. 자루스 2016.07.12 10:39 신고

    무릎을 탁! 치고 갑니다

  3. 김동철 2016.09.02 08:17 신고

    감사합니다.

  4. 승핑 2017.12.28 16:15 신고

    css관련해서 검색하다가 들어오게 되었는데요 해당 css 관련 질문은 아니고 현재 페이지 자체에서 스크롤을 위로 올리면 헤더부분이 나오고 내리면 다시 올라가게끔 로직이 구현되어져 있는데 소스공유가 가능할까요 ?

    • BlogIcon 흉내쟁이 2017.12.28 17:02 신고

      웹코딩 > app,plugin 카테고리보시면 헤더액션관련해서 2가지 글이 있습니다.

      스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기, headroom 살펴보시면 되겠습니다.

  5. 잿빛비상 2018.04.25 09:41 신고

    ::before 영역이 클릭이 안되어서 하루를 허비했는데 덕분에 해결했습니다! 감사합니다!

    • 피카츄 2018.10.24 09:31 신고

      어떻게 해결하셨나요? 저도 지금 select에 before요소가 클릭이 안되어서 찾고있는중인데. ㅠ.ㅠ 알려주시면 감사하겟습니당

티스토리 툴바