CSS 이벤트 제어, pointer-events 커서제거 > 자료실

자료실

자료실

CSS 이벤트 제어, pointer-events 커서제거

페이지 정보

profile_image
작성자 최고관리자
댓글 0 조회 967회 작성일 23-04-20 18:26
작성일 23-04-20 18:26

본문

이벤트가 부여된 요소를 제어하기 위하여 여러가지 방법을 모색할 수 있다.

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;

}

링크 비활성화하기
다음 예제는 http://cginjs.com/으로 통하는 링크의 포인터 이벤트를 비활성화한다
<ul>

  <li><a href="http://chongmoa.com">chongmoa.com</a></li>

  <li><a href="http://cginjs.com">cginjs.com</a></li>

</ul>
a[href="http://cginjs.com"] {

  pointer-events: none;

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

  • 회사 :
  • 대표 :
  • 주소 :
  • 메일 : admin@mysample.com
  • 사업자 등록번호 :
Copyright © cginjs.com All rights reserved.
notice