pointer-events

The pointer-events attribute allows authors to control whether or when an element may be the target of a mouse event. This attribute is used to specify under which circumstance (if any) a mouse event should go "through" an element and target whatever is "underneath" that element instead.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet; see css pointer-events for further information.

Usage context

Categories	Presentation attribute
Value	visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none | inherit
Animatable	Yes
Normative document	SVG 1.1 (2nd Edition)

visiblePainted

The element can only be the target of a mouse event when the visibility attribute is set to visible and when the mouse cursor is over the interior (i.e., 'fill') of the element and the fill attribute 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 attribute is set to a value other than none.

visibleFill

The element can only be the target of a mouse event when the visibility attribute is set to visible and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the fill attribute does not affect event processing.

visibleStroke

The element can only be the target of a mouse event when the visibility attribute is set to visible and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke attribute does not affect event processing.

visible

The element can be the target of a mouse event when the visibility attribute is set to visible 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 fill and stroke attribute do not affect event processing.

painted

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 attribute 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 attribute is set to a value other than none. The value of the visibility attribute does not affect event processing.

fill

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 and visibility attribute do not affect event processing.

stroke

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 and visibility attribute do not affect event processing.

all

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 and visibility attribute do not affect event processing.

none

The element is never the target of mouse events, although mouse events may target its descendent elements if those descendents have pointer-events set to some other value, in which case mouse events will trigger event listeners on this element as appropriate on their way to/from the descendent during the event capture/bubble phases.

Example

Elements

The following elements can use the pointer-events attribute:

• Graphics elements »

See also

• css pointer-events