CSS3 pointer-events use of the detailed

This time to everyone to bring CSS3 pointer-events use detailed, use CSS3 of the pointer-events of the note what, the following is the actual case, together to see.

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:

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

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Pseudo elements:: Before with:: After use

CSS3 Make Seamless Carousel ads

CSS3 method of realizing waterfall flow layout