Go CSS3 pointer-events (Masking mouse events) Property Description

We may encounter this in HTML development: There are elements on the page that use an absolute positioning layout that may obscure some or all of the elements below their location. By default, the portion of the lower element that is obscured does not respond to mouse events.

But sometimes we may need to be covered by elements that still handle mouse events. For example, we cover a map component with an element that displays information, but do not want this information panel to affect the drag of the map below. Then we can use a CSS property called Pointer-events to implement.

One, Pointer-events property Introduction 1, Property value Description Pointer-events is a new property in CSS3, and its supported values are mostly related to SVG, we do not bother. For us, the main concern: None|auto these two attribute values.

• Auto: Behaves the same as when the Pointer-events property is not specified.
• None: The element will never be the target of a mouse event. However, when the Pointer-events property of its descendant element specifies a different value, the mouse event can point to the descendant element, in which case the mouse event will trigger the parent element's event listener in the capture or bubbling order.

Pointer-events:none Precautions:
Using Pointer-events:none to prevent an element from becoming a mouse event target does not necessarily mean that an event listener on an element never fires.
If an element descendant explicitly specifies the Pointer-events property and allows it to be the target of a mouse event, any event that points to that element passes through the parent element during the event propagation and triggers the event listener on it in the appropriate manner.
Of course, mouse activity on the screen on the parent element but not on the descendant elements is not captured by the parent and descendant elements (which will pass through the parent element and point to the element below it).

2, browser compatibility (1) Desktop browser

• ie:11+ (Ie6~ie10 not supported)
• firefox:3.6+
• chrome:4.0+
• safari:6.0
• opera:15.0

(2) Mobile device browser

• IOS safari:6.0
• Android browser:2.1+
• Android chrome:18.0+

Second, use example 1, so that links can not be clicked

Here the second A-label Pointer-events style property is set to None, then the link cannot be clicked, and there is no mouse-hand style. (Again, we can use this style to avoid problems such as multiple clicks on a button, repeated submissions of forms, etc.) ）

<! DOCTYPE html>
　　
2, let the mouse click through the div above
(1)

 
 

  
  
 
   
The yellow translucent div in the following example uses absolute positioning and is overlaid on top of the link.
 
   
By default, the links below the yellow area are not clickable.
 
   
Here we add a pointer-events attribute to the yellow Div, and then we can go through the layer and click on the a tag below.
 
  
 
 
(2) Sample code
<! DOCTYPE html>
　　
Go CSS3 pointer-events (Masking mouse events) Property Description