| <!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> |
