이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

pointer-events CSS 속성은, 특정 엘리먼트의 트리거 역할을 설정합니다. '시각적'으로 트리거 역할(hover, active)을 하는 기능 뿐만 아니라, 이벤트 핸들러가 등록 된 상태의 엘리먼트일지라도 이벤트 트리거로서의 역할을 강제로 막을 수 있습니다.

해당 속성이 명시되어있지 않은 상태일 경우, SVG 요소는 기본값으로 visiblePainted 속성이 적용되어 동작합니다.

추가로, 마우스 이벤트에 대한 트리거 요소가 아니라고 '시각적'으로 알려줌과 동시에, none 속성을 적용하면 해당 엘리먼트 및 하위 모든 엘리먼트에 관한 마우스 이벤트는 무시됩니다. 

Syntax

/* Keyword values */
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 */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

pointer-events 속성은 아래 목록 중 하나를 선택해서 사용할 수 있습니다.

Values

auto
pointer-events 속성이 명시되지 않은 상태로 리셋해 버립니다. SVG 요소의 경우 visiblePainted 속성을 사용하면 동일한 효과를 기대할 수 있습니다.
none
해당 요소는 마우스 이벤트에 대해 트리거로서의 역할을 수행하지 않습니다. 그러나, 하위 요소중에 pointer-events 속성을 적용한 엘리먼트가 있다면, 하위 엘리먼트를 탐색할 가능성이 있습니다. 이러한 환경에서 이벤트 버블링/캡처링 단계를 거쳐 적절한 이벤트 핸들러를 호출하게 됩니다.

SVG only

visiblePainted
SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the interior (i.e., 'fill') of the element and the fill property is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke property is set to a value other than none.
visibleFill
SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the fill property does not affect event processing.
visibleStroke
SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke property does not affect event processing.
visible
SVG only. The element can be the target of a mouse event when the visibility property is set to visible and the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill and stroke do not affect event processing.
painted
SVG only. The element can only be the target of a mouse event when the mouse cursor is over the interior (i.e., 'fill') of the element and the fill property is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke property is set to a value other than none. The value of the visibility property does not affect event processing.
fill
SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) of the element. The values of the fill and visibility properties do not affect event processing.
stroke
SVG only. The element can only be the target of a mouse event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the stroke and visibility properties do not affect event processing.
all
SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill, stroke and visibility properties do not affect event processing.

Formal syntax

auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

Examples

Basic example

This example disables mouse events (clicking, dragging, hovering, etc.) on all images.

img {
  pointer-events: none;
}

This example disables mouse events on the link to http://example.com.

<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>
a[href="http://example.com"] {
  pointer-events: none;
}

Notes

Note that preventing an element from being the target of mouse events by using pointer-events does not necessarily mean that mouse event listeners on that element cannot or will not be triggered. If one of the element's children has pointer-events explicitly set to allow that child to be the target of mouse events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any mouse activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).

Elements with pointer-events: none will still receive focus through sequential keyboard navigation using the Tab key.

We would like to provide finer grained control (than just auto and none) in HTML for which parts of an element will cause it to "catch" mouse events, and when. To help us in deciding how pointer-events should be further extended for HTML, if you have any particular things that you would like to be able to do with this property, then please add them to the Use Cases section of this wiki page (don't worry about keeping it tidy).

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'pointer-events' in that specification.
Candidate Recommendation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'pointer-events' in that specification.
Recommendation Initial definition

초기값auto
적용대상all elements
상속yes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 11Opera Full support 9Safari Full support 3WebView Android Full support 2Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Applies to HTML elements
Experimental
Chrome Full support 2Edge Full support 12Firefox Full support 3.6IE Full support 11Opera Full support 15Safari Full support 4WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also

문서 태그 및 공헌자

이 페이지의 공헌자: limjungmok
최종 변경자: limjungmok,