The 'pointer-events' property

25 November 2008

Authors:: Dean Jackson (dino@apple.com), Apple

NOTE: This document is a work-in-progress proposal. It should not be considered complete, nor does it represent the position of Apple or the WebKit project.

1 Introduction

This document describes how the SVG pointer-events property is extended for use in (X)HTML content.

2 The pointer-events property

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:

user interface events such as mouse clicks
dynamic pseudo-classes (i.e., :hover, :active and :focus)
hyperlinks

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 only applies to the property when used with HTML content. Note that the property has a new initial value, "auto", which behaves as "visiblePainted" in SVG content and "visible" in non-SVG content.

'pointer-events'

Value:	auto \| visible \| none \| visiblePainted \| visibleFill \| visibleStroke \| painted \| fill \| stroke \| all
Initial:	auto
Applies to:	all elements
Inherited:	yes
Percentages:	N/A
Media:	visual

auto: In SVG content, behave as visiblePainted. Otherwise, behave as visible.
visible: The given element receives pointer events.
none: The given element does not receive pointer events.
visiblePainted
visibleFill
visibleStroke
painted
fill
stroke
all: In SVG content, behave as defined by the SVG specification. Otherwise, behave as visible.