3 min read
•Question 32 of 49easyHow Does pointer-events Work?
Understanding click-through and event handling.
What You'll Learn
- pointer-events values
- Click-through patterns
- Common use cases
Values
styles.cssCSS
.element {
pointer-events: auto; /* Normal (default) */
pointer-events: none; /* Click through */
}Use Cases
styles.cssCSS
/* Disabled button appearance */
.btn:disabled {
pointer-events: none;
opacity: 0.5;
}
/* Click through overlay */
.overlay {
pointer-events: none;
}
/* But allow clicks on children */
.overlay .clickable {
pointer-events: auto;
}
/* Loading state */
.loading {
pointer-events: none;
opacity: 0.7;
}With SVG
styles.cssCSS
/* Only stroke is clickable */
path {
pointer-events: stroke;
}
/* Only fill is clickable */
path {
pointer-events: fill;
}