Tips for using the Pointer-events property of CSS to share the effect of mouse penetration

The scope of responsibility of CSS in modern browsers and the blurring of JavaScript are unclear. For example, CSS in the-webkit-touch-callout property in iOS can prohibit when the user clicks the pop-up bubble box. The pointer-events style that this article is talking about is more like JavaScript, which can:

1. Prevent user's Click action to produce any effect
2. Prevent the default mouse pointer from appearing
3. Prevent hover and active state changes in CSS from triggering events
4. Blocking events triggered by JavaScript click Actions
A CSS property can do all of this with so many things!

When using Pointer-events:none, it means that it will not capture any clicks, but just let the event penetrate underneath it. The code is as follows:

<style>    . Overlay {     pointer-events:none;    }   </style>   <p id= "overlay" class= "overlay" ></p>

If the value is auto, the effect is the same as if the Pointer-events property is not defined, and the mouse does not penetrate the current layer. In SVG, this value has the same effect as visiblepainted.
This pointer-events property has many properties that can be used, but most of them are for SVG: auto, none, visiblepainted*, visiblefill*, visiblestroke*, visible*, painted*, fill*, stroke*, all*, and inherit.

Some things to keep in mind about pointer-events:
1. Child elements can declare pointer-events to unblock the parent element's blocking mouse event limit.
2. If you set the Click event listener on an element and then you remove the pointer-events style declaration, or change its value to auto, the listener will take effect again. Basically, the listener will follow the pointer-events settings.