What is

A requirement encountered in business is to disable the submit button before the request is returned, in order to prevent the user from clicking the button all the time and sending the request. Because the button is written with the tag, simply disabled is not desirable.

This is where the pointer-Events CSS3 property comes in. It is used to specify under what circumstances, if any, a particular graphic element can be a target for mouse events.

How to use

  • Auto — Effect and undefinedpointer-eventsProperty the same, the mouse will not penetrate the current layer. In SVG, this value has the same effect as visiblePainted.
  • None — The element is no longer the target of mouse events, and the mouse is no longer listening for the current layer but for elements in the layer below. But if its children are setpointer-eventsFor other values, such as auto, the mouse still listens for the child.
  • Other attribute values are specific to SVG and will not be covered here.

compatibility

reference

MDN – pointer-events

Front-end observation – CSS3 pointer-events

Zhang Xinxu – CSS3 Pointer-events: None Example and extension

Github – pointer_events_polyfill.js