1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
---
title: pointer-events
slug: Web/CSS/pointer-events
tags:
- CSS
- CSS Property
- Reference
- SVG
translation_of: Web/CSS/pointer-events
---
<div>{{CSSRef}}</div>
<p><strong><code>pointer-events</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 <a href="/ko/docs/Web/API/Event/target">대상</a>이 될 수 있는지 지정합니다.</p>
<div>{{EmbedInteractiveExample("pages/css/pointer-events.html")}}</div>
<h2 id="구문">구문</h2>
<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */
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;
</pre>
<p><code>pointer-events</code> 속성은 아래 목록의 값 중 하나를 선택해서 지정할 수 있습니다.</p>
<h3 id="값">값</h3>
<dl>
<dt><code>auto</code></dt>
<dd>요소가 <code>pointer-events</code> 속성을 지정하지 않은 것처럼 행동합니다. SVG 콘텐츠에서는 <code>auto</code>와 <code>visiblePainted</code>가 동일한 효과를 지닙니다.</dd>
</dl>
<dl>
<dt><code>none</code></dt>
<dd>요소가 포인터 이벤트의 대상이 되지 않습니다. 그러나 해당 요소의 자손이 다른 <code>pointer-events</code> 값을 지정한 경우, 그 자손은 대상이 될 수 있습니다. 이 때는 이벤트 캡처/<a href="/ko/docs/Web/API/Event/bubbles">버블</a> 단계에서 <code>none</code>을 지정한 요소의 이벤트 처리기를 발동할 수 있습니다.</dd>
</dl>
<h4 id="SVG_전용_HTML에서_실험적_기능">SVG 전용 (HTML에서 실험적 기능)</h4>
<dl>
<dt><code>visiblePainted</code></dt>
<dd>SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the interior (i.e., 'fill') of the element and the <code>fill</code> property is set to a value other than <code>none</code>, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the <code>stroke</code> property is set to a value other than <code>none</code>.</dd>
<dt><code>visibleFill</code></dt>
<dd>SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the <code>fill</code> property does not affect event processing.</dd>
<dt><code>visibleStroke</code></dt>
<dd>SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the <code>stroke</code> property does not affect event processing.</dd>
<dt><code>visible</code></dt>
<dd>SVG only. The element can be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> 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 <code>fill</code> and <code>stroke</code> do not affect event processing.</dd>
<dt><code>painted</code></dt>
<dd>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 <code>fill</code> property is set to a value other than <code>none</code>, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the <code>stroke</code> property is set to a value other than <code>none</code>. The value of the <code>visibility</code> property does not affect event processing.</dd>
<dt><code>fill</code></dt>
<dd>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 <code>fill</code> and <code>visibility</code> properties do not affect event processing.</dd>
<dt><code>stroke</code></dt>
<dd>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 <code>stroke</code> and <code>visibility</code> properties do not affect event processing.</dd>
<dt><code>all</code></dt>
<dd>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 <code>fill</code>, <code>stroke</code> and <code>visibility</code> properties do not affect event processing.</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="설명">설명</h2>
<p>SVG 콘텐츠에 <code>pointer-events</code>를 지정하지 않은 경우, <code>visiblePainted</code> 값과 동일한 방법을 사용합니다.</p>
<p><code>none</code> 값의 경우 요소가 포인터 이벤트의 대상이 아님을 가리키는 동시에, 이벤트가 요소를 "뚫고" 들어가 "아래" 요소를 대상으로 하도록 만듭니다.</p>
<p>다만, <code>pointer-events</code>를 사용해 요소가 포인터 이벤트의 대상이 되지 않도록 지정한다 하여도, 요소의 이벤트 수신기가 절대 발동하지 않거나, 아예 발동할 수 없는 상태가 되는 것은 아닙니다. 만약 자식 요소 중 하나의 <code>pointer-events</code>를 명시적으로 허용한 경우, 해당 자식을 대상으로 하는 이벤트는 평범하게 부모 트리를 타고 올라가며, 그 도중에 부모의 이벤트 수신기를 발동시게 됩니다. 물론, 부모 요소가 덮고 있지만 (포인터 이벤트를 허용한) 자식 요소 바깥의 영역은 클릭해도 부모와 자식 둘 다 감지하지 못합니다.</p>
<p><code>pointer-events: none</code>을 지정한 요소여도 <kbd>Tab</kbd> 키를 사용한 순차적 키보드 내비게이션으로 인해 포커스를 획득할 수 있습니다.</p>
<p>We would like to provide finer grained control (than just <code>auto</code> and <code>none</code>) in HTML for which parts of an element will cause it to "catch" pointer events, and when. To help us in deciding how <code>pointer-events</code> 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 <a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">this wiki page</a> (don't worry about keeping it tidy).</p>
<h2 id="형식_정의">형식 정의</h2>
<p>{{cssinfo}}</p>
<h2 id="형식_구문_2">형식 구문</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="예제">예제</h2>
<h3 id="기본_예제">기본 예제</h3>
<p>다음 예제는 모든 이미지에서 포인터 이벤트(클릭, 드래그, 호버 등)를 비활성화합니다.</p>
<pre class="brush:css notranslate">img {
pointer-events: none;
}</pre>
<h3 id="링크_비활성화하기">링크 비활성화하기</h3>
<p>다음 예제는 https://example.com으로 통하는 링크의 포인터 이벤트를 비활성화합니다.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush:html notranslate"><ul>
<li><a href="https://developer.mozilla.org">MDN</a></li>
<li><a href="http://example.com">example.com</a></li>
</ul></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush:css notranslate">a[href="http://example.com"] {
pointer-events: none;
}</pre>
<h4 id="결과">결과</h4>
<div>{{EmbedLiveSample("링크_비활성화하기", "500", "100")}}</div>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
<td>{{Spec2('SVG2')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its <a class="external" href="http://wiki.csswg.org/spec/css4-ui#pointer-events">level 4</a>.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
<p>{{Compat("css.properties.pointer-events")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>The SVG attribute {{SVGAttr("pointer-events")}}</li>
<li>The SVG attribute {{SVGAttr("visibility")}}</li>
<li><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit Specs PointerEventsProperty</a> extended for use in (X)HTML content</li>
<li>{{cssxref("user-select")}} - controls whether the user can select text</li>
</ul>
|
