CSS3 pointer-events Usage Explanation

This article mainly introduces CSS3 Pointer-events, small series feel very good, and now share to everyone, but also for everyone to do a reference. Let's take a look at it with a little knitting.

What is Pointer-events?

As the name implies, Pointer-events is a property that is used for HTML pointer events.

Pointer-events can disable dynamic effects such as hover/focus/active of HTML elements.

The default value is auto, syntax:

Copy Code

The code is as follows:

Pointer-events:auto | none | visiblepainted | Visiblefill | Visiblestroke | Visible | Painted | Fill | Stroke | All

Our Popular Auto | The None attribute, it is important to note that the other attributes are only available for SVG elements.

Auto: You can use pointer events.

None: To disable pointer events, it is important to note that when the element that disables the pointer has a child/parent element, the event is triggered at its child/parent element during the time bubbling/capturing phase.

Common scenarios

1. Disable the A-tag event effect

When the tab switch is done, the current item is selected, the current tag is disabled, and the new data is only re-requested when the other tab is switched.

<!--css--> <style>     active{         pointer-events:none;     } </style> <!--html--> <ul >     <li><a class= "tab" ></a></li>     <li><a class= "tab Active" ></a ></li>     <li><a class= "tab" ></a></li> </ul>

2. Toggle on/Off button status

When you click the Submit button, to prevent the user from clicking the button and sending the request, adding pointer-events:none to the button before the request returns results can prevent this situation, which is also common in the business.

<!--css--> j-pro{     pointer-events:none;} <!--html--> <button r-model={this.submit ()} r-class={{" J-pro ": Flag}}> submit </button> <!--js--> submit:function () {     This.data.flag = true;     this. $request (URL, {         //...         Onload:function (JSON) {             if (Json.retcode = =) {                 This.data.flag = false;             }         }. Bind (This)         //...     }); }

3, prevent transparent elements and clickable elements overlap can not click

Some of the content of the display area, in order to achieve some good-looking CSS effect, when the element above the other elements covered, in order not to affect the elements below the event, to the covered elements to increase pointer-events:none; can be resolved.

<!--css--> layer{     backround:linear-gradient (180deg, #fff, Transparent);} j-pro{     poninter-events: None } <!--html--> <ul>     <li class= "Layer J-pro" ></li>     <li class= "Item" ></li>     <li class= "item" ></li>     <li class= "item" ></li> </ul>

poninter-events compatibility