The pointer-events
CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse 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;
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 mouse events, the value none
instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.
Initial value | auto |
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
The pointer-events
property is specified as a single keyword chosen from the list of values below.
Values
auto
- The element behaves as it would if the
pointer-events
property were not specified. In SVG content, this value and the valuevisiblePainted
have the same effect. none
- The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have
pointer-events
set to some other value. In these circumstances, mouse 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
- SVG only. The element can only be the target of a mouse event when the
visibility
property is set tovisible
and when the mouse cursor is over the interior (i.e., 'fill') of the element and thefill
property is set to a value other thannone
, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and thestroke
property is set to a value other thannone
. visibleFill
- SVG only. The element can only be the target of a mouse event when the
visibility
property is set tovisible
and when the mouse cursor is over the interior (i.e., fill) of the element. The value of thefill
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 tovisible
and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of thestroke
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 tovisible
and the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of thefill
andstroke
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 thannone
, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and thestroke
property is set to a value other thannone
. The value of thevisibility
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
andvisibility
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
andvisibility
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
andvisibility
properties do not affect event processing.
Formal syntax
auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
Examples
Example 1
/* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc */ img { pointer-events: none; }
Example 2
Makes the link to http://example.com non-reactive.
<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).
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) 1.1 (Second Edition) The definition of 'pointer-events' in that specification. |
Recommendation |
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
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
SVG support | 1.0 | (Yes) | 1.5 (1.8) | 11.0 | 9.0 (2.0) | 3.0 (522) |
HTML/XML content | 2.0 | (Yes) | 3.6 (1.9.2) | 11.0 | 15.0 | 4.0 (530) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 2.1 | (Yes) | 3.6 | 11 | 33 | 3.2 |
See also
- The SVG attribute
pointer-events
- WebKit Specs PointerEventsProperty extended for use in (X)HTML content