pointer-events
CSS pointer-events Property
The pointer-events property defines whether or not an element reacts to pointer events.
This property is an SVG property and is not defined in CSS specifications.
Many values are applicable to SVG elements, but only three of these values apply to HTML elements.
Important Notes
Important Notes
Using pointer-events to prevent an element from being the target of pointer events does not mean that pointer event listeners won’t be triggered. If one of the element’s children has pointer-events it means that the child can be the target of pointer events. Thus, any events that target that child passes through the parent and trigger event listeners on it.
| 类目 | 类目 |
|---|---|
| Initial Value | auto |
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | Scalable Vector Graphics (SVG) 1.1 (Second Edition). |
| DOM Syntax | object.style.pointerEvents = “auto”; |
Syntax
Syntax
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | initial | inherit;
Example of the pointer-events property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.example {
pointer-events: none;
}
div.example2 {
pointer-events: auto;
}
</style>
</head>
<body>
<h2>The pointer-events Property</h2>
<h3>Pointer-events: none</h3>
<div class="example">
Click here: <a href="https://www.w3cdoc.com/learn-javascript.html">JavaScript Tutorial</a>
</div>
<h3>Pointer-events: auto</h3>
<div class="example2">
Click here: <a href="https://www.w3cdoc.com/learn-css.html">CSS Tutorial</a>
</div>
</body>
</html>
Result
In the given example hover over the elements to see which one reacts to the pointer-events.
This example shows how pointer events can be specified to fall through or be caught by underlying elements:
Example of pointer-events with the <svg> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
fill: #ccc;
}
.b {
fill: #8ebf42;
}
.c {
fill: #1c87c9;
pointer-events: none;
}
.d {
stroke: #666;
fill: none;
pointer-events: all;
}
.box:hover {
stroke: #000;
stroke-width: 5;
}
</style>
</head>
<body>
<h2>Pointer-events property example</h2>
<svg width="300" height="300">
<g transform="translate(20, 20)">
<path class="a box" d="M 0 0 L 100 0 L 100 100 L 0 100 z" />
<path class="b box" d="M 50 50 l 100 0 l 0 100 l -100 0 z" />
<path class="c box" d="M 100 100 l 100 0 l 0 100 l -100 0 z" />
<path class="d box" d="M 150 150 l 100 0 l 0 100 l -100 0 z" />
</g>
</svg>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| none | The element never reacts to the pointer events. |
| auto | The elements accepts the pointer events such as clicks, hover etc. This is the default value of this property. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |
SVG only Values
SVG only Values
| 类目 | 类目 |
|---|