pointer-events | CSS-Methods

The pointer-events property controls whether or not a component can turn out to be the goal of pointer occasions like clicks, hover states, and different pointer-based occasions. In different phrases, it enables you to determine 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 know 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 factor is underneath the pointer. This course of is named hit-testing.

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

As soon as you consider pointer-events this manner, most of its habits begins to make sense. Quite than disabling occasions, it merely modifications which factor (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 parts. In SVG, it applies to container parts, graphics parts, and the factor.
• 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;

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

Apart from 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 parts, 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 factor behaves usually and may obtain pointer occasions. In SVG, this behaves the identical as visiblePainted.
• none: The factor itself can’t turn out to be the goal of pointer occasions, which means it may well’t be clicked or hovered. As an alternative, the browser targets no matter is beneath it.

SVG-only values

• visiblePainted: The factor 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 stuffed space (fill just isn’t none) or a stroked edge (stroke just isn’t none).
• visibleFill: The factor solely receives pointer occasions when it’s seen and the pointer is over its fill, whatever the worth of the fill property, which means it may well even be set to none.
• visibleStroke: The factor solely receives pointer occasions when it’s seen and the pointer is over its stroke, whatever the worth of the stroke property.
• seen: The factor 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 factor 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 factor solely receives pointer occasions when the pointer is over its fill, whatever the values of the fill or visibility properties.
• stroke: The factor solely receives pointer occasions when the pointer is over its stroke, whatever the values of the stroke or visibility properties.
• bounding-box: The factor receives pointer occasions wherever inside its bounding field—the smallest rectangle that utterly surrounds it—no matter its form, even when components of that space aren’t painted.
• all: The factor 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 choose again in

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

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

.youngster {
  pointer-events: auto;
}

On this instance, the mum or dad ignores pointer occasions, however the youngster can nonetheless turn out to be their goal.

A standard use case is a modal. You would possibly use a full-page container to middle the modal, however that container additionally covers all the 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’ll be able to work together with the background buttons despite the fact that they’re behind the overlay.

Occasion propagation nonetheless works

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

For instance, if a baby with pointer-events: auto is clicked inside a mum or dad 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 mum or dad nonetheless run.

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

Within the following demo, you’ll be able to see how the mum or dad with pointer-events: none can nonetheless obtain click on, pointerenter, and pointerleave while you click on or transfer the pointer into or out of its interactive youngster.

pointer-events doesn’t disable a component

The pointer-events property solely prevents the factor from changing into the goal of pointer occasions. Due to this fact, the factor 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 it is advisable to disable a local kind management, use the disabled attribute as an alternative. And in case your purpose is to make a whole part of the web page utterly non-interactive—together with pointer enter, keyboard focus, and the accessibility tree—the inert attribute is a more sensible choice.

pointer-events doesn’t forestall textual content choice

Setting the pointer-events property to none doesn’t cease customers from deciding on 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 turn out to be the goal of pointer occasions.

In case your purpose is to forestall textual content from being chosen, use the user-select property as an alternative.

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

Strive deciding on the textual content in every block beneath:

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 mum or dad menu merchandise. The issue is that the submenu remains to be there, so it may well nonetheless obtain pointer occasions despite the fact that you’ll be able to’t see it.

Beneath, you’ll be able to 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 parts from getting in the way in which.

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

Browser Assist

Associated properties