Detailed explanation of css3 pointer-events usage

巴扎黑
Release: 2017-09-20 09:51:15
Original
3176 people have browsed it

This article mainly introduces css3 pointer-events. The editor thinks it is quite good. I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

What are pointer-events?

As the name suggests, pointer-events is an attribute used for HTML pointer events.

pointer-events can disable hover/focus/active and other dynamic effects 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 commonly used auto | none attributes , it should be noted that other attributes are only applicable to SVG elements.

auto: Pointer events can be used.

none: Disable pointer events. It should be noted that when the element with pointer disabled has child/parent elements, the event will be triggered on its child/parent elements during the time bubbling/capture phase.

Common scenarios

1. Disable a label event effect

When doing tab switching, when the current item is selected, the event of the current label is disabled , only when switching other tabs, new data will be requested again.


   
Copy after login

2. Switch the on/off button state

When clicking the submit button, in order to prevent the user from clicking the button all the time, a request is sent. When the request does not return Before the result, add pointer-events: none to the button to prevent this situation, which is also very common in business.


 .j-pro{ pointer-events: none; }    submit: function(){ this.data.flag = true; this.$request(url, { // ... onload: function(json){ if(json.retCode == 200){ this.data.flag = false; } }.bind(this) // ... }); }
Copy after login

3. Prevent transparent elements and clickable elements from overlapping and not being clickable

Some content display areas, in order to achieve some good-looking css effects, when elements There are other elements above covering it. In order not to affect the events of the elements below, adding pointer-events: none; to the covered element can solve the problem.


 .layer{ backround: linear-gradient(180deg, #fff, transparent); } .j-pro{ poninter-events: none; }  
Copy after login

poninter-events Compatibility

The above is the detailed content of Detailed explanation of css3 pointer-events usage. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!