“This is the 28th day of my participation in the Gwen Challenge.

pointer-events

The pointer-Events CSS property specifies under what circumstances, if any, a particular graphic element can be a target (en-US) for mouse events.

Note that this is an SVG property and is not defined in any CSS specification.

The pointer-Events attribute can have many values that apply to SVG elements, but only three of those values apply to HTML elements. When a pointer event is applied to an HTML element, it can specify whether the element can respond to mouse (or touch) events. It can be used to prevent clicks, states (CSS activity, focus, and hover states), and cursor manipulation (for example, displaying a pointer cursor on a link).

You can make the element respond to pointer events (auto) or prevent it from doing so (None). If it is prevented from responding to pointer events, the elements below it become the target of those events. If you click the element, the element below it receives the click event. The same applies to hover and other cursor operations. For example, you can select text in the element below an element that has pointer events (pointer-events: None) (see the demonstration below).

Pointer event properties are useful in different scenarios. One advantage of this property is that it allows you to create a 60fps scroll using pointer-events: None. Ryan Seddon wrote a detailed article on how it works; His article is worth reading.

The official grammar

  • Statement:
pointer-events: visiblePainted | visibleFill | visibleStroke | visible |
painted | fill | stroke | all | none | inherit
Copy the code

Values in the official syntax apply to SVG elements. Of these values, only these values apply to HTML:

pointer-events: auto | none | inherit

Copy the code
  • Default value: auto
  • Applies to: All elements
  • Animation: no

Values (Values)

auto

The default value. Enable pointer events. This element responds to pointer events and prevents them from firing on the elements below it.

none

Pointer events on the element are disabled. The element does not respond to pointer events. The elements below it can respond to pointer events as if the elements did not exist above them.

inherit

This element inherits its pointer event value from its parent.

other

For more information on additional values, see the SVG specification.

example

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    / *... * /
    pointer-events: none;
}
Copy the code

The online Demo

In the following example, the override has pointer events: none (pointer-events: none;) , so you can select the text and click the anchor tag below it. Also notice how the cursor becomes a pointer (pointing hand) when you hover over a link, because the hover state is triggered over the link.

Because nuggets do not support iframe preview, see codepen CSS Poiter-Events demo for preview results

Try changing the value of None to Auto to see how the new response looks.

prompt

Using pointer-events to prevent an element from being targeted by mouse events does not necessarily mean that event listeners on the element will never fire. If the element descendant explicitly specifies the pointer-events attribute and allows it to be the target of mouse events, then any events that point to that element will pass through the parent element during event propagation, triggering event listeners on it in the appropriate manner.

Reference thanks

  • Tympanus.net/codrops/css…
  • Developer.mozilla.org/zh-CN/docs/…