pointer-events | CSS-Tips

The pointer-events property controls whether or not a component can change into the goal of pointer occasions like clicks, hover states, and different pointer-based occasions. In different phrases, it permits you to resolve whether or not the browser ought to deal with a component as interactive when the pointer is over it.

.no-pointer-events {
  pointer-events: none;
}

To grasp how the property works, it helps to know what the browser does earlier than it fires a pointer occasion. First, it has to find out which ingredient is underneath the pointer. This course of is named hit-testing.

Usually, the browser chooses the topmost ingredient underneath the pointer. But when that ingredient has pointer-events set to none, the browser skips it and continues on the lookout for the following eligible ingredient beneath.

As soon as you concentrate on pointer-events this manner, most of its conduct begins to make sense. Reasonably than disabling occasions, it merely modifications which ingredient (or, within the case of SVG, which a part of a component) turns into the occasion goal within the first place.

Syntax

pointer-events: auto | bounding-box | visiblePainted | visibleFill | visibleStroke | seen | painted | fill | stroke | all | none;

• Preliminary: auto
• Applies to: All components. In SVG, it applies to container components, graphics components, and the ingredient.
• Inherited: Sure
• Computed worth: Specified key phrase
• Animation sort: discrete

Values

pointer-events: auto;
pointer-events: none;

/* SVG values */
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: seen;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: bounding-box;
pointer-events: all;

/* International values */
pointer-events: inherit;
pointer-events: preliminary;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;

In addition to the usual CSS international values proven above, pointer-events defines eleven key phrase values. You’ll use auto and none with each HTML and SVG components, whereas the opposite 9 are SVG-only and supply finer management over which components of a graphic can obtain pointer occasions.

• auto: The default worth. The ingredient behaves usually and might obtain pointer occasions. In SVG, this behaves the identical as visiblePainted.
• none: The ingredient itself can’t change into the goal of pointer occasions, that means it might probably’t be clicked or hovered. As an alternative, the browser targets no matter is beneath it.

SVG-only values

• visiblePainted: The ingredient solely receives pointer occasions when it’s seen (visibility: seen) and the pointer is over a painted a part of the graphic. In different phrases, it’s over a crammed space (fill shouldn’t be none) or a stroked edge (stroke shouldn’t be none).
• visibleFill: The ingredient solely receives pointer occasions when it’s seen and the pointer is over its fill, whatever the worth of the fill property, that means it might probably even be set to none.
• visibleStroke: The ingredient solely receives pointer occasions when it’s seen and the pointer is over its stroke, whatever the worth of the stroke property.
• seen: The ingredient solely receives pointer occasions when it’s seen and the pointer is over both its fill or stroke, whatever the values of the fill and stroke properties.
• painted: The ingredient solely receives pointer occasions when the pointer is over a painted a part of the graphic (its fill or stroke), whatever the worth of the visibility property.
• fill: The ingredient solely receives pointer occasions when the pointer is over its fill, whatever the values of the fill or visibility properties.
• stroke: The ingredient solely receives pointer occasions when the pointer is over its stroke, whatever the values of the stroke or visibility properties.
• bounding-box: The ingredient receives pointer occasions anyplace inside its bounding field—the smallest rectangle that fully surrounds it—no matter its form, even when components of that space aren’t painted.
• all: The ingredient receives pointer occasions when the pointer is over both its fill or stroke, whatever the values of the fill, stroke, or visibility properties.

Kids can decide again in

One factor that’s simple to overlook is that pointer-events is an inherited property. Setting pointer-events to none on a dad or mum means its kids inherit that worth as effectively. Nevertheless, any little one can override the inherited worth by setting pointer-events again to auto (or one other legitimate worth).

.dad or mum {
  pointer-events: none;
}

.little one {
  pointer-events: auto;
}

On this instance, the dad or mum ignores pointer occasions, however the little one can nonetheless change into their goal.

A typical use case is a modal. You may use a full-page container to heart the modal, however that container additionally covers your complete viewport. With out altering its pointer-events worth, it prevents pointer occasions from reaching the weather beneath it. Setting pointer-events to none on the container fixes that, however as a result of the property is inherited, you’ll additionally want to revive the modal itself with pointer-events set to auto.

Within the following demo, when the pointer-events property is specified as none you may work together with the background buttons regardless that they’re behind the overlay.

Occasion propagation nonetheless works

The pointer-events property solely determines which ingredient turns into the occasion goal. It doesn’t change how occasions journey by means of the DOM afterward.

For instance, if a toddler with pointer-events: auto is clicked inside a dad or mum with pointer-events: none, the kid nonetheless turns into occasion.goal. From there, the occasion follows its regular seize and bubble phases, so occasion listeners connected to the dad or mum nonetheless run.

In different phrases, pointer-events impacts goal choice, not occasion propagation.

Within the following demo, you may see how the dad or mum with pointer-events: none can nonetheless obtain click on, pointerenter, and pointerleave once you click on or transfer the pointer into or out of its interactive little one.

pointer-events doesn’t disable a component

The pointer-events property solely prevents the ingredient from changing into the goal of pointer occasions. Due to this fact, the ingredient can nonetheless obtain keyboard focus with the Tab key, and customers can proceed interacting with it utilizing the keyboard if it’s in any other case focusable.

If you have to disable a local type management, use the disabled attribute as a substitute. And in case your aim is to make a whole part of the web page fully non-interactive—together with pointer enter, keyboard focus, and the accessibility tree—the inert attribute is a more sensible choice.

pointer-events doesn’t stop textual content choice

Setting the pointer-events property to none doesn’t cease customers from choosing textual content. For instance, customers can nonetheless choose the textual content by urgent Ctrl/Cmd + A on the keyboard.

That’s as a result of textual content choice isn’t decided by whether or not a component can change into the goal of pointer occasions.

In case your aim is to stop textual content from being chosen, use the user-select property as a substitute.

.avoid-user-selection {
  user-select: none;
}

Attempt choosing the textual content in every block under:

Demo

When constructing a navigation menu, a typical sample is to cover a submenu by setting its opacity to 0 after which make it seen when the consumer hovers over its dad or mum menu merchandise. The issue is that the submenu remains to be there, so it might probably nonetheless obtain pointer occasions regardless that you may’t see it.

Under, you may see two equivalent menus. One hides its submenu utilizing solely opacity, whereas the opposite additionally makes use of pointer-events. Hover over the hidden submenu space and check out interacting with the content material behind it to see how pointer-events prevents invisible components from getting in the best way.

Additionally, to raised perceive how every SVG worth of this property works, choose one from the dropdown and transfer your pointer across the ring: over its crammed band, inside its hole heart, and over the empty corners of the dashed bounding field. Discover how the interactive space modifications with every worth.

Browser Help

Associated properties