mozilla

Revision 426839 of pointer-events

  • Revision slug: Web/SVG/Attribute/pointer-events
  • Revision title: pointer-events
  • Revision id: 426839
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment 2 words added, 2 words removedSVG/Attribute/pointer-events Web/SVG/Attribute/pointer-events

Revision Content

« 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 {{ cssxref("pointer-events","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 {{ SVGAttr("visibility") }} attribute is set to visible and when the mouse cursor is over the interior (i.e., 'fill') of the element and the {{ SVGAttr("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 {{ SVGAttr("stroke") }} attribute is set to a value other than none.
visibleFill
The element can only be the target of a mouse event when the {{ SVGAttr("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 {{ SVGAttr("fill") }} attribute does not effect event processing.
visibleStroke
The element can only be the target of a mouse event when  the {{ SVGAttr("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 {{ SVGAttr("stroke") }} attribute does not effect event processing.
visible
The element can be the target of a mouse event when  the {{ SVGAttr("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 {{ SVGAttr("fill") }} and {{ SVGAttr("stroke") }} attribute do not effect 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 {{ SVGAttr("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 {{ SVGAttr("stroke") }} attribute  is set to a value other than none. The value of the {{ SVGAttr("visibility") }} attribute does not effect 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 {{ SVGAttr("fill") }} and {{ SVGAttr("visibility") }} attribute do not effect 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 {{ SVGAttr("stroke") }} and {{ SVGAttr("visibility") }} attribute do not effect 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 {{ SVGAttr("fill") }}, {{ SVGAttr("stroke") }} and {{ SVGAttr("visibility") }} attribute do not effect event processing.
none
The element is never the target of mouse events, although mouse events may target its descendant elements if those descendants 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 descendant during the event capture/bubble phases.

Example

Elements

The following elements can use the pointer-events attribute

See also

  • {{ cssxref("pointer-events","CSS pointer-events") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>pointer-events</code> 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.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("pointer-events","CSS pointer-events ") }} for further information</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td><strong title="this is the default value">visiblePainted</strong> | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none | inherit</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty" title="http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt>visiblePainted</dt> <dd>The element can only be the target of a mouse event when the {{ SVGAttr("visibility") }} attribute is set to<code> visible </code>and when the mouse cursor is over the interior (i.e., 'fill') of the element and the {{ SVGAttr("fill") }} attribute is set to a value other than <code>none</code>, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the {{ SVGAttr("stroke") }} attribute is set to a value other than<code> none</code>.</dd> <dt>visibleFill</dt> <dd>The element can only be the target of a mouse event when the {{ SVGAttr("visibility") }} attribute is set to<code> visible </code>and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the {{ SVGAttr("fill") }} attribute does not effect event processing.</dd> <dt>visibleStroke</dt> <dd>The element can only be the target of a mouse event when  the {{ SVGAttr("visibility") }} attribute is set to<code> visible </code>and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the {{ SVGAttr("stroke") }} attribute does not effect event processing.</dd> <dt>visible</dt> <dd>The element can be the target of a mouse event when  the {{ SVGAttr("visibility") }} attribute is set to <code>visible</code> 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 {{ SVGAttr("fill") }} and {{ SVGAttr("stroke") }} attribute do not effect event processing.</dd> <dt>painted</dt> <dd>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 {{ SVGAttr("fill") }} attribute is set to a value other than <code>none</code>, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the {{ SVGAttr("stroke") }} attribute  is set to a value other than<code> none</code>. The value of the {{ SVGAttr("visibility") }} attribute does not effect event processing.</dd> <dt>fill</dt> <dd>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 {{ SVGAttr("fill") }} and {{ SVGAttr("visibility") }} attribute do not effect event processing.</dd> <dt>stroke</dt> <dd>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 {{ SVGAttr("stroke") }} and {{ SVGAttr("visibility") }} attribute do not effect event processing.</dd> <dt>all</dt> <dd>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 {{ SVGAttr("fill") }}, {{ SVGAttr("stroke") }} and {{ SVGAttr("visibility") }} attribute do not effect event processing.</dd> <dt>none</dt> <dd>The element is never the target of mouse events, although mouse events may target its descendant elements if those descendants have<code> pointer-events </code>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 descendant during the event capture/<a class="internal" href="../../../../en/DOM/event.bubbles" rel="internal">bubble</a> phases.</dd>
</dl>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>pointer-events</code> attribute</p>
<ul> <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Graphics elements</a> »</li>
</ul>
<h2 id="See_also">See also</h2>
<ul> <li>{{ cssxref("pointer-events","CSS pointer-events") }}</li>
</ul>
Revert to this revision