pointer-events
CSS
property sets under what circumstances (if any) a particular graphic element can become the
target
of pointer events.
/* 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
property is specified as a single keyword chosen from the list of values below.
auto
pointer-events
property were not specified. In SVG content, this value and the value
visiblePainted
have the same effect.
none
pointer-events
set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/
bubble
phases.
visiblePainted
visibility
property is set to
visible
and e.g. when a 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 a 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
visibility
property is set to
visible
and when e.g. a mouse cursor is over the interior (i.e., fill) of the element. The value of the
fill
property does not affect event processing.
visibleStroke
visibility
property is set to
visible
and e.g. 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
visibility
property is set to
visible
and e.g. 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
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
fill
and
visibility
properties do not affect event processing.
stroke
stroke
and
visibility
properties do not affect event processing.
all
fill
,
stroke
，和
visibility
properties do not affect event processing.
When this property is unspecified, the same characteristics of the
visiblePainted
value apply to SVG content.
In addition to indicating that the element is not the target of pointer events, the value
none
instructs the pointer event to go "through" the element and target whatever is "underneath" that element instead.
Note that preventing an element from being the target of pointer events by using
pointer-events
does
not
necessarily mean that pointer 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 pointer 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 pointer 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" pointer 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).
| 初始值 |
auto
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | yes |
| 计算值 | 如指定 |
| 动画类型 | discrete |
auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
This example disables pointer events (clicking, dragging, hovering, etc.) on all images.
img {
pointer-events: none;
}
This example disables pointer 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;
}
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 .
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
pointer-events
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1.5 | IE 完整支持 11 | Opera 完整支持 9 | Safari 完整支持 4 | WebView Android 完整支持 2 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 3.2 | Samsung Internet Android 完整支持 1.0 |
| Applies to HTML elements Experimental | Chrome 完整支持 2 | Edge 完整支持 12 | Firefox 完整支持 3.6 | IE 完整支持 11 | Opera 完整支持 15 | Safari 完整支持 4 | WebView Android 完整支持 37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 3.2 | Samsung Internet Android 完整支持 1.0 |
完整支持
实验。期望将来行为有所改变。
pointer-events
visibility
user-select
- controls whether the user can select text
pointer-events
touch-action