javascript - How to make styles opaque and events transparent in js

Question

Visually, the structure aa contains two p's ab ac, ac blocks the input in ab, as shown below.
How to use js to realize that ac only presents styles, ab is the subject of the event, so that the event is not triggered on ac but on ab through ac.
It is not a simple event delegation, because event delegation Specific events will need to be bound, and my purpose is that ac is just a style and blocks the content in ab. For example, in the actual situation in the two pictures, the input has been covered by ac. When you click on this area, you cannot enter the input in ab. I need to be able to enter and edit the content normally, but the visual ac covers it.
Please point out if there is anything that is not clearly described.

Answer 1

pointer-events:none