617 lines
18 KiB
HTML
617 lines
18 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>
|
|
The 'pointer-events' property
|
|
</title>
|
|
<link href="CSSVisualEffects/base.css" rel="stylesheet" type="text/css">
|
|
<style type="text/css">
|
|
|
|
@media print {
|
|
|
|
/* the following doesn't work for now,
|
|
instead we rely on a patched version of html2ps which has this built-in */
|
|
.dlink { display: none }
|
|
|
|
/* the following doesn't work for now,
|
|
instead we rely on a patched version of html2ps which has this built-in */
|
|
div.navbar {
|
|
display: none;
|
|
}
|
|
|
|
html { margin: 0 !important }
|
|
body { font-family: serif }
|
|
th, td { font-family: inherit }
|
|
a { color: inherit !important }
|
|
div.example:before { font-family: serif !important }
|
|
pre.example:before { font-family: serif !important }
|
|
a:link, a:visited { text-decoration: none !important }
|
|
a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
|
|
}
|
|
@page {
|
|
margin: 1.5cm 1.1cm;
|
|
}
|
|
|
|
/* html body { margin-left: 8.5em } /* Overrides 70px in base.css */
|
|
|
|
body {counter-reset: exampleno figure}
|
|
|
|
h2, h3, h5, h6 { margin-top: 2em }
|
|
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; font-family: inherit }
|
|
div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
|
|
div.example { page-break-inside: avoid }
|
|
dt { page-break-after: avoid }
|
|
|
|
span.id {float: right; font-weight: bold}
|
|
|
|
/* p, p.note + p, p.testlink + p, p.note, p.issue { */
|
|
p, p.testlink + p, p.issue, p.mtb {
|
|
/* text-indent: 2em; */
|
|
margin-bottom: 0.6em;
|
|
margin-top: 0.6em
|
|
}
|
|
p + p, p + div.sidefigure + p {
|
|
/* text-indent: 2em; */
|
|
margin-top: 0
|
|
}
|
|
dd p {
|
|
margin-top: 0
|
|
}
|
|
|
|
h1 + h2 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
pre {
|
|
text-align: left; /* fixes justification in Mac IE 5 */
|
|
text-indent: 0; /* fixes indent in Mac Netscape 6 */
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
font-size: 90% /*smaller*/;
|
|
}
|
|
/*
|
|
var {
|
|
font-style: normal;
|
|
}
|
|
*/
|
|
img {
|
|
border-style: none;
|
|
color: white;
|
|
}
|
|
.toc {
|
|
text-indent: 0;
|
|
}
|
|
|
|
|
|
@media all { /* NS < 6 doesn't like borders around inline elements... */
|
|
|
|
body {
|
|
line-height: 1.3;
|
|
}
|
|
|
|
a:link, a:visited {
|
|
/* color: inherit;*/
|
|
}
|
|
a.logo:link, a.logo:visited {
|
|
padding: 0;
|
|
border-style: none;
|
|
}
|
|
|
|
/* Hmm, this seems to confuse many browsers... */
|
|
dt { margin-left: 0; margin-top: 1em; color: #030; font-weight: bold;}
|
|
dd { margin-left: 2em }
|
|
dl, ul, ol { margin-left: 1em; padding-left: 0 }
|
|
li { margin-left: 2em; padding-left: 0 }
|
|
|
|
}
|
|
ul.indexlist { margin-left: 0; /*column-width: 13em; columns: 13em*/ }
|
|
ul.indexlist li { margin-left: 0; list-style: none }
|
|
ul.indexlist li li { margin-left: 1em }
|
|
|
|
div.example:before {
|
|
content: "Example";
|
|
content: "Example " counter(exampleno, upper-roman);
|
|
font: bold small sans-serif;
|
|
/*float: left;*/
|
|
position: absolute;
|
|
top: -0.6em;
|
|
left: -2.5em;
|
|
width: 7.5em;
|
|
text-align: center;
|
|
line-height: 1em;
|
|
color: #FFF8DD;
|
|
background: #600;
|
|
padding: 0.1em;
|
|
border: thin solid #999;
|
|
/*margin: -1.3em 0 0.3em -2.5em;*/
|
|
}
|
|
div.example {
|
|
counter-increment: exampleno;
|
|
}
|
|
pre.example:before {
|
|
content: "Example";
|
|
content: "Example " counter(exampleno, upper-roman);
|
|
font: bold small sans-serif;
|
|
/*float: left;*/
|
|
position: absolute;
|
|
top: -0.6em;
|
|
left: -2.5em;
|
|
width: 7.5em;
|
|
text-align: center;
|
|
line-height: 1em;
|
|
color: #FFF8DD;
|
|
background: #600;
|
|
padding: 0.1em;
|
|
border: thin solid #999;
|
|
/*margin: -1.3em 0 0.3em -2.5em;*/
|
|
}
|
|
pre.example {
|
|
counter-increment: exampleno;
|
|
}
|
|
div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
|
|
div.illegal-xml, pre.example, pre.illegal-example, pre.html,
|
|
pre.illegal-html, pre.xml, pre.illegal-xml {
|
|
background: #FFF8DD;
|
|
padding: 0.5em;
|
|
margin: 1em 0;
|
|
border: thin solid #999;
|
|
position: relative;
|
|
}
|
|
pre.example, pre.illegal-example, pre.html,
|
|
pre.illegal-html, pre.xml, pre.illegal-xml {
|
|
padding-top: 1.5em;
|
|
}
|
|
div.example { color: #600 }
|
|
pre.example { color: #600 }
|
|
pre.illegal-example { color: red }
|
|
div.illegal-example { color: red }
|
|
div.illegal-example p { color: black }
|
|
|
|
div.html { color: #600 }
|
|
pre.html { color: #600 }
|
|
pre.illegal-html { color: red }
|
|
div.illegal-html { color: red }
|
|
div.illegal-html p { color: black }
|
|
pre.deprecated-html { color: red }
|
|
div.deprecated-html { color: red }
|
|
div.deprecated-html p { color: black }
|
|
|
|
div.xml { color: #600 }
|
|
pre.xml { color: #600 }
|
|
pre.illegal-xml { color: red }
|
|
div.illegal-xml { color: red }
|
|
div.illegal-xml p { color: black }
|
|
|
|
code { font-size: 90% }
|
|
.css { color: #800 } /* inline CSS code (SPAN/CODE) */
|
|
code.css { font-family: inherit; font-size: 100% }
|
|
code.html { color: #600 } /* inline HTML */
|
|
code.xml { color: #600 } /* inline XML */
|
|
.property { } /* name of a CSS property (SPAN) */
|
|
.prop-name { color: #2A2AA5; font-weight: bold; font-size: 90%} /* name of a CSS property (SPAN) */
|
|
.prop-value { font-weight: bold; font-size: 90%} /* CSS property value (SPAN) */
|
|
.descriptor { } /* name of a CSS descriptor (SPAN) */
|
|
.issue { color: #c00 } /* editorial remark, open issue */
|
|
.type { font-style: italic } /* A <type> value for a property */
|
|
|
|
dfn { font-weight: bolder; /*font-size: 1em*/ }
|
|
|
|
/* Class note is a non-normative note. May be inline or a P or DIV */
|
|
.note {
|
|
/* font-weight: bold; */
|
|
background-color: #cfc;
|
|
margin-top: 2em;
|
|
padding: 1em;
|
|
border: 1px solid #6a6;
|
|
border-left: 8px solid #6a6;
|
|
}
|
|
p.note, div.note {
|
|
/* margin: 1em 2em; */
|
|
}
|
|
p.note:before, span.note:before { content: "\25B6" " " }
|
|
div.note > p:first-child:before { content: "\25B6" " " }
|
|
|
|
.normref { color: red }
|
|
.informref { color: green }
|
|
|
|
|
|
/* ToC not indented, but font style shows hierarchy */
|
|
ul.toc {margin: 1em 0; padding: 0; font-weight: bold}
|
|
ul.toc ul {margin: 0; padding: 0; font-weight: normal}
|
|
ul.toc ul ul {margin: 0 /*0 0 2em*/; font-style: italic}
|
|
ul.toc ul ul ul {margin: 0}
|
|
ul.toc li {margin: 0.6em 0; padding: 0}
|
|
ul.toc li li {margin: 0}
|
|
/*
|
|
ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
|
|
ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
|
|
*/
|
|
|
|
@media all { /* NS4 doesn't align the floats properly :-( */
|
|
|
|
/* Section numbers in a column of their own */
|
|
ul.toc span.secno {margin-right: 1em} /* workaround for Opera6 */
|
|
ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
|
|
/*ul.toc span.secno {text-align: right}*/
|
|
ul.toc li {clear: both}
|
|
ul.toc {margin-left: 5em}
|
|
/* If we had 'tab', floats would not be needed here:
|
|
ul.toc span.secno {tab: 5em right; margin-right: 1em}
|
|
ul.toc li {text-indent: 5em hanging}
|
|
The second line in case items wrap
|
|
*/
|
|
}
|
|
|
|
ul.index {
|
|
list-style: disc; /* Mac NS has problem with 'none' */
|
|
list-style: none;
|
|
}
|
|
|
|
s, del {text-decoration: line-through; color: red}
|
|
u, ins {text-decoration: underline; background: #bfa}
|
|
|
|
div.figure, div.sidefigure {
|
|
text-align: center;
|
|
margin: 2.5em 0;
|
|
}
|
|
div.sidefigure {
|
|
float: right;
|
|
width: 50%;
|
|
margin: 0 0 0.5em 0.5em
|
|
}
|
|
div.figure img, div.sidefigure img {
|
|
display: block;
|
|
margin: auto;
|
|
max-width: 100%
|
|
}
|
|
p.caption, caption {
|
|
text-align: center;
|
|
font-style: italic;
|
|
font-size: 90%;
|
|
margin: 1.5em 2em;
|
|
text-indent: 0;
|
|
}
|
|
p.caption:before {
|
|
content: "Figure " counter(figure) ". ";
|
|
font-weight: bold;
|
|
}
|
|
p.caption {
|
|
counter-increment: figure;
|
|
}
|
|
|
|
/* DL list is indented, but figure inside it is not */
|
|
dd { margin-left: 2em }
|
|
dd div.figure { margin-left: -2em }
|
|
|
|
sup {
|
|
vertical-align: super;
|
|
font-size: 80%
|
|
}
|
|
|
|
/* "Equations" (not real MathML, but simple HTML) are put in a
|
|
blockquote and may have an equation number. We make sure the
|
|
blockquote has enough margin on the right and then put the equation
|
|
number there. */
|
|
|
|
blockquote {
|
|
margin: 0.5em 4em 0.5em 2em;
|
|
text-indent: 0;
|
|
}
|
|
.eqno {
|
|
text-align: right;
|
|
float: right;
|
|
width: 3em;
|
|
margin: 0 -4em 0 0;
|
|
font-weight: bold;
|
|
/* background: silver; color: black; padding: 0.1em */
|
|
}
|
|
|
|
table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
|
|
table.equiv-table th, table.equiv-table td { padding: 0.3em }
|
|
table.equiv-table th { text-align: left }
|
|
/* table.equiv-table th:first-child { text-align: right } */
|
|
table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
|
|
table.equiv-table { border-bottom: hidden }
|
|
table.equiv-table { empty-cells: show }
|
|
table.equiv-table caption { margin: 0.5em 0 0 0 }
|
|
|
|
/* Style for table of properties */
|
|
table.proptable {
|
|
font-size: small;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
text-align: left;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
@media print { /* Use the wide margin in print */
|
|
table.proptable {margin: 1em 0 1em -8.5em}
|
|
}
|
|
|
|
table.proptable td, table.proptable th {
|
|
padding: 0.4em;
|
|
border-style: solid none none dotted;
|
|
border-width: thin;
|
|
border-color: red;
|
|
}
|
|
table.proptable th:first-child, table.proptable td:first-child {
|
|
border-left-style: none;
|
|
}
|
|
|
|
|
|
/* Style for table that defines a property or a descriptor */
|
|
table.propdef, table.propdef-extra, table.descdef {
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
background: #DEF;
|
|
margin-top: 1.2em;
|
|
margin-bottom: 1.2em
|
|
}
|
|
table.propdef td, table.propdef-extra td, table.descdef td {
|
|
padding: 0 0.3em;
|
|
vertical-align: baseline;
|
|
}
|
|
/*
|
|
table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
|
|
font-weight: bold;
|
|
font-style: normal
|
|
}
|
|
*/
|
|
table.propdef td:first-child,
|
|
table.propdef-extra td:first-child,
|
|
table.descdef td:first-child {
|
|
font-style: italic;
|
|
width: 8.1em
|
|
}
|
|
table.propdef td[colspan]:first-child,
|
|
table.propdef-extra td[colspan]:first-child,
|
|
table.descdef td[colspan]:first-child {
|
|
font-style: inherit
|
|
}
|
|
table.propdef tr:first-child,
|
|
table.propdef-extra tr:first-child,
|
|
table.descdef tr:first-child {
|
|
background: #005A9C;
|
|
color: white
|
|
}
|
|
/* table.propdef tr:first-child td { padding-top: 0.1em; padding-bottom: 0.1em } */
|
|
|
|
/* This would replace :first-child for Opera, but it confuses WinIE :-( */
|
|
/*
|
|
table.propdef td { width: 8em }
|
|
table.propdef td + td { width: auto }
|
|
table.propdef tr { background: #005A9C; color: white }
|
|
table.propdef tr + tr { background: transparent; color: black }
|
|
*/
|
|
|
|
/* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
|
|
or, if they do, they don't put them in uppercase. But the following
|
|
class is provided in case a spec wants to use RFC 2119 terms in
|
|
uppercase in the source. */
|
|
|
|
em.rfc2119 {
|
|
text-transform: lowercase;
|
|
font-variant: small-caps;
|
|
font-style: normal
|
|
}
|
|
|
|
/* In Profile specs, a table of required features: */
|
|
|
|
table.features th {
|
|
background: #00589f;
|
|
color: #fff;
|
|
text-align: left;
|
|
padding: 0.2em 0.2em 0.2em 0.5em;
|
|
}
|
|
table.features td {
|
|
vertical-align: top;
|
|
border-bottom: 1px solid #ccc;
|
|
padding: 0.3em 0.3em 0.3em 0.7em;
|
|
}
|
|
|
|
body { line-height: 1.4; }
|
|
|
|
.issue, .todo {
|
|
//display: none;
|
|
margin: 1em;
|
|
border: 2px solid;
|
|
padding: 1em;
|
|
}
|
|
span.issue, span.todo {
|
|
border-width: 1px;
|
|
margin: 0; padding: 0;
|
|
}
|
|
.issue { border-color: red; }
|
|
.todo { border-color: yellow; }
|
|
.issue:before, .todo:before {
|
|
content: attr(class) ": ";
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
.issue { background: rgb(255,224,224); color: black; }
|
|
.todo { background: rgb(255,255,192); color: black; }
|
|
|
|
.syntax {
|
|
padding: 1em;
|
|
margin: 1em 0;
|
|
border: 1px black solid;
|
|
background: rgb(224,224,255);
|
|
color: black;
|
|
}
|
|
.idl-code {
|
|
margin: 0;
|
|
font-family: monospace;
|
|
border: 1px solid black;
|
|
color: black;
|
|
background-color: #dfdfdf;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th {
|
|
background-color: #dfdfdf;
|
|
}
|
|
|
|
td, th {
|
|
text-align: left;
|
|
padding: 0.2em 1em;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>
|
|
The 'pointer-events' property
|
|
</h1>
|
|
<h2>
|
|
25 November 2008
|
|
</h2>
|
|
<dl>
|
|
<dt>
|
|
Authors:
|
|
</dt>
|
|
<dd>
|
|
Dean Jackson (<a href="mailto:dino@apple.com">dino@apple.com</a>), <a href="http://www.apple.com/">Apple</a>
|
|
</dd>
|
|
</dl>
|
|
<hr>
|
|
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<div class="note">
|
|
<p>
|
|
NOTE: This document is a work-in-progress proposal. It should not be
|
|
considered complete, nor does it represent the position of Apple or
|
|
the WebKit project.
|
|
</p>
|
|
<p>
|
|
For reference:
|
|
</p>
|
|
<ul>
|
|
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=11395">WebKit bug on implementation</a></li>
|
|
<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=380573">Mozilla bug on implementation</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2>
|
|
1 Introduction
|
|
</h2>
|
|
|
|
<p>
|
|
This document describes how the <a
|
|
href="http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty">SVG
|
|
pointer-events property</a> is extended for use in (X)HTML content.
|
|
</p>
|
|
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h2>
|
|
2 The <span class="prop-name">pointer-events</span> property
|
|
</h2>
|
|
|
|
<p>
|
|
In different circumstances, authors may want to control under what
|
|
circumstances particular elements can become the target of pointer
|
|
events. For example, the author might want a given element to ignore
|
|
pointer events under all circumstances so that elements underneath the
|
|
given element will become the target of pointer events.
|
|
</p>
|
|
|
|
<p>
|
|
The 'pointer-events' property specifies under what circumstances a given
|
|
element can be the target element for a pointer event. It
|
|
affects the circumstances under which the following are processed:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>user interface events such as mouse clicks</li>
|
|
<li>dynamic pseudo-classes (i.e., :hover, :active and :focus)</li>
|
|
<li>hyperlinks</li>
|
|
</ul>
|
|
|
|
<p>
|
|
The <span class="prop-name">pointer-events</span> property was originally defined for <a
|
|
href="http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty">SVG content</a>
|
|
and, as such, accepts property values specific to vector graphics (eg. relating to
|
|
graphical fill and stroke). The following definition only applies to the property
|
|
when used with HTML content. Note that the property has a new initial value, "auto",
|
|
which behaves as "visiblePainted" in SVG content and "visible" in non-SVG content.
|
|
</p>
|
|
|
|
<div class="propdef">
|
|
<dl>
|
|
<dt><span class="prop-name">'pointer-events'</span></dt>
|
|
<dd>
|
|
<table summary="pointer-events property">
|
|
<tr>
|
|
<td><em>Value:</em></td>
|
|
<td>
|
|
auto | visible | none | visiblePainted | visibleFill | visibleStroke |
|
|
painted | fill | stroke | all
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><em>Initial:</em></td>
|
|
<td>auto</td>
|
|
</tr>
|
|
<tr>
|
|
<td><em>Applies to:</em></td>
|
|
<td>all
|
|
elements</td>
|
|
</tr>
|
|
<tr>
|
|
<td><em>Inherited:</em></td>
|
|
<td>yes</td>
|
|
</tr>
|
|
<tr>
|
|
<td><em>Percentages:</em></td>
|
|
<td>N/A</td>
|
|
</tr>
|
|
<tr>
|
|
<td><em>Media:</em></td>
|
|
<td>visual</td>
|
|
</tr>
|
|
</table>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<dl>
|
|
<dt><span class="prop-value">auto</span></dt>
|
|
<dd>
|
|
In SVG content, behave as <span class="prop-value">visiblePainted</span>.
|
|
Otherwise, behave as <span class="prop-value">visible</span>.
|
|
</dd>
|
|
<dt><span class="prop-value">visible</span></dt>
|
|
<dd>
|
|
The given element receives pointer events.
|
|
</dd>
|
|
<dt><span class="prop-value">none</span></dt>
|
|
<dd>
|
|
The given element does not receive pointer events.
|
|
</dd>
|
|
<dt><span class="prop-value">visiblePainted</span></dt>
|
|
<dt><span class="prop-value">visibleFill</span></dt>
|
|
<dt><span class="prop-value">visibleStroke</span></dt>
|
|
<dt><span class="prop-value">painted</span></dt>
|
|
<dt><span class="prop-value">fill</span></dt>
|
|
<dt><span class="prop-value">stroke</span></dt>
|
|
<dt><span class="prop-value">all</span></dt>
|
|
<dd>
|
|
In SVG content, behave as defined by the <a
|
|
href="http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty">SVG
|
|
specification</a>. Otherwise, behave as <span
|
|
class="prop-value">visible</span>.
|
|
</dd>
|
|
</dl>
|
|
|
|
|
|
</body>
|
|
</html>
|