pointer-events

  • Revision slug: Web/CSS/pointer-events
  • Revision title: pointer-events
  • Revision id: 430947
  • Created:
  • Creator: Ben82
  • Is current revision? No
  • Comment corrected typo

Revision Content

{{CSSRef}}

Summary

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.
  • {{Xref_cssinitial}} auto
  • Applies to all elements
  • {{Xref_cssinherited}} yes
  • Media {{Xref_cssvisual}}
  • {{Xref_csscomputed}} the specified value, or else the inherited value

Syntax

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

Values

auto
The element behaves as it would if the pointer-events property was not specified. In SVG content, this value and the value visiblePainted have the same effect.
none
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
visiblePainted
SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the interior (i.e., 'fill') of the element and the fill property 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 property is set to a value other than none.
visibleFill
SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the fill property does not effect event processing.
visibleStroke
SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke property does not effect event processing.
visible
SVG only. The element can be the target of a mouse event when the visibility property 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 do not effect event processing.
painted
SVG only. 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 property 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 property is set to a value other than none. The value of the visibility property does not effect event processing.
fill
SVG only. 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 properties do not effect event processing.
stroke
SVG only. 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 properties do not effect event processing.
all
SVG only. 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 properties do not effect event processing.

Examples

Example 1

/* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc */
img {
  pointer-events: none;
}

Example 2

{{todo("Please write description for this example.")}}

<ul>
<li><a href="https://developer.mozilla.org/">MDN</a></li>
<li><a href="http://example.com">example.com</a></li>
</ul>
a[href="http://example.com"] {
  pointer-events: none;
}
{{EmbedLiveSample('Example_2', "500", "100")}}

Notes

Note that preventing an element from being the target of mouse events by using pointer-events does not necessarily mean that mouse event listeners on that element cannot or will not be triggered. If one of the element's children has pointer-events explicitly set to allow that child to be the target of mouse events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any mouse activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).

We would like to provide finer grained control (than just auto and none) in HTML for which parts of an element will cause it to "catch" mouse events, and when. To help us in deciding how pointer-events should be further extended for HTML, if you have any particular things that you would like to be able to do with this property, then please add them to the Use Cases section of this wiki page (don't worry about keeping it tidy).

Specifications

Specification Status Comment
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}} {{Spec2('SVG1.1')}}  

Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
SVG support 1.0 {{CompatGeckoDesktop("1.8")}} 9.0 9.0 (2.0) 3.0 (522)
HTML/XML content 2.0 {{CompatGeckoDesktop("1.9.2")}} {{CompatNo}} {{CompatNo}} 4.0 (530)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

See also

Revision Source

<div>
  {{CSSRef}}</div>
<h2 id="Summary">Summary</h2>
<p>The CSS property <code>pointer-events</code> allows authors to control under what circumstances (if any) a particular graphic element can become the <a href="/en-US/docs/Web/API/event.target">target</a> of mouse events. When this property is unspecified, the same characteristics of the <code>visiblePainted</code> value apply to SVG content.</p>
<p>In addition to indicating that the element is not the target of mouse events, the value <code>none</code> instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.</p>
<div class="note">
  <strong>Warning</strong>: The use of <code>pointer-events</code> in CSS for non-SVG elements is <em>experimental</em>. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.</div>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial}}</dfn> <code>auto</code></li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{Xref_cssinherited}}</dfn> yes</li>
  <li><dfn>Media</dfn> {{Xref_cssvisual}}</li>
  <li><dfn>{{Xref_csscomputed}}</dfn> the specified value, or else the inherited value</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox" style="white-space:pre-wrap">
pointer-events:  <em>auto</em> | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>auto</code></dt>
  <dd>
    The element behaves as it would if the <code>pointer-events</code> property was not specified. In SVG content, this value and the value <code>visiblePainted</code> have the same effect.</dd>
  <dt>
    <code>none</code></dt>
  <dd>
    The element is never the <a href="/en-US/docs/Web/API/event.target">target</a> of mouse events; however, mouse events may target its descendant elements if those descendants have <code>pointer-events</code> set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/<a href="/en-US/docs/Web/API/event.bubbles">bubble</a> phases.</dd>
  <dt>
    <code>visiblePainted</code></dt>
  <dd>
    SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the interior (i.e., 'fill') of the element and the <code>fill</code> property 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 <code>stroke</code> property is set to a value other than <code>none</code>.</dd>
  <dt>
    <code>visibleFill</code></dt>
  <dd>
    SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property 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 <code>fill</code> property does not effect event processing.</dd>
  <dt>
    <code>visibleStroke</code></dt>
  <dd>
    SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property 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 <code>stroke</code> property does not effect event processing.</dd>
  <dt>
    <code>visible</code></dt>
  <dd>
    SVG only. The element can be the target of a mouse event when the <code>visibility</code> property 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 <code>fill</code> and <code>stroke</code> do not effect event processing.</dd>
  <dt>
    <code>painted</code></dt>
  <dd>
    SVG only. 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 <code>fill</code> property 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 <code>stroke</code> property is set to a value other than <code>none</code>. The value of the <code>visibility</code> property does not effect event processing.</dd>
  <dt>
    <code>fill</code></dt>
  <dd>
    SVG only. 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 <code>fill</code> and <code>visibility</code> properties do not effect event processing.</dd>
  <dt>
    <code>stroke</code></dt>
  <dd>
    SVG only. 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 <code>stroke</code> and <code>visibility</code> properties do not effect event processing.</dd>
  <dt>
    <code>all</code></dt>
  <dd>
    SVG only. 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 <code>fill</code>, <code>stroke</code> and <code>visibility</code> properties do not effect event processing.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h3 id="Example_1">Example 1</h3>
<pre class="brush:css">
/* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc */
img {
  pointer-events: none;
}</pre>
<h3 id="Example_2" name="Example_2">Example 2</h3>
<p>{{todo("Please write description for this example.")}}</p>
<pre class="brush:html">
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/"&gt;MDN&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://example.com"&gt;example.com&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
<pre class="brush:css">
a[href="http://example.com"] {
  pointer-events: none;
}</pre>
<div>
  {{EmbedLiveSample('Example_2', "500", "100")}}</div>
<h2 id="Notes">Notes</h2>
<p>Note that preventing an element from being the target of mouse events by using <code>pointer-events</code> does <em>not</em> necessarily mean that mouse event listeners on that element <em>cannot</em> or <em>will not</em> be triggered. If one of the element's children has <code>pointer-events</code> explicitly set to <em>allow</em> that child to be the target of mouse events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any mouse activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).</p>
<p>We would like to provide finer grained control (than just <code>auto</code> and <code>none</code>) in HTML for which parts of an element will cause it to "catch" mouse events, and when. To help us in deciding how <code>pointer-events</code> should be further extended for HTML, if you have any particular things that you would like to be able to do with this property, then please add them to the Use Cases section of <a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">this wiki page</a> (don't worry about keeping it tidy).</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
      <td>{{Spec2('SVG1.1')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its <a class="external" href="http://wiki.csswg.org/spec/css4-ui#pointer-events">level 4</a>.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>SVG support</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop("1.8")}}</td>
        <td>9.0</td>
        <td>9.0 (2.0)</td>
        <td>3.0 (522)</td>
      </tr>
      <tr>
        <td>HTML/XML content</td>
        <td>2.0</td>
        <td>{{CompatGeckoDesktop("1.9.2")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>4.0 (530)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>The SVG attribute {{SVGAttr("pointer-events")}}</li>
  <li><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit Specs PointerEventsProperty</a> extended for use in (X)HTML content</li>
</ul>
Revert to this revision