User:Tantekelik/pointer-events

From W3C Wiki

This is a literal copy of work in progress for specifying 'pointer-events' that has been moved from CSS3-UI to CSS4-UI.




<!-- from Features at risk -->

 <!-- 
 <li>pointer-events property:
    implemented by Firefox 3.6 and later, Safari 4 and later, Opera v?
 </li>
 -->
 
...

<h4 id="pointer-events"><span class="property">'pointer-events'</span> property</h4>
<table class="propdef" id="propdef-pointer-events"><tbody>
<tr><th>Name:</th><td><dfn>pointer-events</dfn></td></tr>
<tr><th>Value:</th><td>
auto | none | all | visible | visiblePainted | visibleFill | visibleStroke | painted | fill | stroke | inherit </td></tr>
<tr><th>Initial:</th><td>auto</td></tr>
<tr><th>Applies to:</th><td>all elements</td></tr>
<tr><th>Inherited:</th><td>yes</td></tr>
<tr><th>Percentages:</th><td>N/A</td></tr>
<tr><th>Media:</th><td>visual, interactive</td></tr>
<tr><th>Computed value:</th><td>the specified value</td></tr>
</tbody></table>

<p>The pointer-events property allows authors to control whether or when an element may be the target of user pointing device (pointer, e.g. mouse) events. This property is used to specify under which circumstance (if any) a pointer event should go "through" an element and target whatever is "underneath" that element instead. This also applies to other "hit testing" behaviors such as dynamic pseudo-classes (:hover, :active, :focus), hyperlinks, and Document.elementFromPoint().</p>

<p>Related open issues: 
 <a href="http://wiki.csswg.org/spec/css3-ui#issue-6">6</a>, 
 <a href="http://wiki.csswg.org/spec/css3-ui#issue-7">7</a>, 
 <a href="http://wiki.csswg.org/spec/css3-ui#issue-8">8</a>, 
 <a href="http://wiki.csswg.org/spec/css3-ui#issue-9">9</a>, 
 <a href="http://wiki.csswg.org/spec/css3-ui#issue-10">10</a>, 
 <a href="http://wiki.csswg.org/spec/css3-ui#issue-11">11</a>.
</p>

<p>Values have the following meanings (values defined as "SVG only" behave as '<span class="value">auto</span>' in other XHTML and HTML content).</p>

<dl>
<dt>auto</dt>
  <dd>
  In SVG content, behave as <span class="value">visiblePainted</span>. Otherwise, behave as <span class="value">all</span>.
  </dd>


<dt>none</dt>
  <dd>
  The element is never the target of pointer events, although pointer events may target its descendant elements if those descendants have '<span class="property">pointer-events</span>' set to some other value, in which case pointer events will trigger event listeners on this element as appropriate on their way to/from the descendant during the event capture/bubble phases. 

  <div class="note"><p>
  <em><strong>Note.</strong> 
  When specifying 'none' for the 'pointer-events' property on an element, authors should also consider making element not focusable, e.g. in SVG, setting 'focusable' to 'false'. See related <a href="http://wiki.csswg.org/spec/css3-ui#issue-13">issue 13</a>.
  </em></p>
  </div>

  </dd>


<dt>all</dt>
  <dd>
  The element may be the target element for pointer events whenever the pointer is inside the CSS border edge of the element (or in SVG, over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element). The value of the '<span class="property">visibility</span>' property does not effect event processing.
  </dd>


<dt>visible</dt>
  <dd>
  The element may be the target of pointer events when the '<span class="property">visibility</span>' property is set to <span class="value">visible</span>, and the pointer is over the contents, background, or border of the element (or in SVG, over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element). In SVG, the values of the '<span class="property">fill</span>' and '<span class="property">stroke</span>' do not effect event processing.
  </dd>


<dt>visiblePainted</dt>
  <dd>
  SVG only. The element can only be the target of a pointer event when the '<span class="property">visibility</span>' property is set to <span class="value">visible</span> and when the pointer is over the interior (i.e., 'fill') of the element and the '<span class="property">fill</span>' property is set to a value other than <span class="value">none</span>, or when the pointer is over the perimeter (i.e., 'stroke') of the element and the '<span class="property">stroke</span>' property is set to a value other than <span class="value">none</span>.
  </dd>


<dt>visibleFill</dt>
  <dd>
  SVG only. The element can only be the target of a pointer event when the '<span class="property">visibility</span>' property is set to <span class="value">visible</span> and when the pointer is over the interior (i.e., fill) of the element. The value of the  '<span class="property">fill</span>' property does not effect event processing.  
  </dd>


<dt>visibleStroke</dt>
  <dd>
  SVG only. The element can only be the target of a pointer event when the '<span class="property">visibility</span>' property is set to <span class="value">visible</span> and when the pointer is over the perimeter (i.e., stroke) of the element. The value of the '<span class="property">stroke</span>' property does not effect event processing.
  </dd>


<dt>painted</dt>
  <dd>
  SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., 'fill') of the element and the '<span class="property">fill</span>' 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 <span class="value">none</span>. The value of the '<span class="property">visibility</span>' property does not effect event processing.  
  </dd>


<dt>fill</dt>
  <dd>
  SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) of the element. The values of the '<span class="property">fill</span>' and '<span class="property">visibility</span>' properties do not effect event processing.
  </dd>


<dt>stroke</dt>
  <dd>
  SVG only. The element can only be the target of a pointer event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the '<span class="property">stroke</span>' and '<span class="property">visibility</span>' properties do not effect event processing.  
  </dd>


</dl>


<!-- from Appendix C. Changes -->

<li>'<span class="property">pointer-events</span>' property - new!</li>


<!-- Appendix D. Default style sheet -->

/* SVG initial values */
@namespace svg "http://www.w3.org/2000/svg";
svg|svg { pointer-events: none }
svg|svg>* { pointer-events: visiblePainted }
/* setting the SVG specific initial value on the children of
   the svg root element should be sufficient to mimic
   the SVG specified behavior of initial: visiblePainted, 
   descendant elements will inherit it accordingly */