この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください！
« SVG Attribute reference home
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
visibilityattribute is set tovisibleand when the mouse cursor is over the interior (i.e., 'fill') of the element and thefillattribute is set to a value other thannone, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and thestrokeattribute is set to a value other thannone. - visibleFill
-
The element can only be the target of a mouse event when the
visibilityattribute is set tovisibleand when the mouse cursor is over the interior (i.e., fill) of the element. The value of thefillattribute does not affect event processing. - visibleStroke
-
The element can only be the target of a mouse event when the
visibilityattribute is set tovisibleand when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of thestrokeattribute does not affect event processing. - visible
-
The element can be the target of a mouse event when the
visibilityattribute is set tovisibleand the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of thefillandstrokeattribute 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
fillattribute is set to a value other thannone, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and thestrokeattribute is set to a value other thannone. The value of thevisibilityattribute 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
fillandvisibilityattribute 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
strokeandvisibilityattribute 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,strokeandvisibilityattribute 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-eventsset 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: