This document describes how the SVG pointer-events property is extended for use in (X)HTML content. Furthermore, it suggests standard behavior for pointer events, which so far differs between user agents.
This document is a work-in-progress proposal for review by the CSS Working Group and is subject to change without notice. This document has no formal standing within W3C. Please consult the group's home page and the W3C technical reports index for information about the latest publications by this group.
This document is based on earlier work by Dean Jackson (Apple).
Positioning and CSS transforms allow authors to create content with elements that overlap in many different ways. Elements may be overlayed by other elements that may or may not be their children. The pointer-events property is closely modeled on the SVG pointer-events property and lets an element be entirely or partially transparent to events.
For reference, see the CSS Wiki page on hit testing.
In different circumstances, authors may want to control under what circumstances particular elements can become the target of pointer events. For example, the author might want a given element to ignore pointer events under all circumstances so that elements underneath the given element will become the target of pointer events.
The 'pointer-events' property specifies under what circumstances a given element can be the target element for a pointer event. It affects the circumstances under which the following are processed:
The pointer-events property was originally defined for SVG content and, as such, accepts property values specific to vector graphics (eg. relating to graphical fill and stroke). The following definition applies to the property when used with CSS layout boxes in general. Note that the property has a new initial value, "auto", which behaves as "visiblePainted" in SVG content and "visible" in non-SVG content.
| Name: | pointer-events |
|---|---|
| Value: | auto | none | all | visible | visiblePainted | visibleFill | visibleStroke | painted | fill | stroke | background | border | inherit |
| Initial: | auto |
| Applies to: | all elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
This property determines whether an element is transparent to user events. This also applies to other "hit testing" behaviors such as dynamic pseudo-classes (:hover, :active, :focus), hyperlinks, and Document.elementFromPoint().
No values of this property cause an element to be hit-tested when it would not have been hit tested before. When hit-testing text, text boxes are used, as is already the case.
Note that the pointer-events property is only consulted when determining the target of an event. Once the target element has been identified, event propagation follows the existing DOM model.
It is not determined whether this and the other visible* properties should apply to HTML.
This is the current behavior in Trident and Presto HTML.
Furthermore, fully transparent areas of embedded images are not considered painted.Should the requirement in this last sentence be made optional? None of the aforementioned engines supports this.
This is the current behavior in Gecko and WebKit HTML.