Detailed explanation of pointer-event attribute

1. The pointer-event attribute can specify under what circumstances can an element become a mouse event

2. Value:

 1、pointer-event:auto;(default value), For svg elements, this value is the same as visiblePainted
 
  2. Pointer-event:none;Elements will not become targets for mouse events
 
  3. Pointer-event:visiblePainted;Applicable only to SVG elements, elements will only become targets of mouse events if:
		 ① Visibility attribute value: visible, and the mouse pointer is inside the element, and the fill attribute value is not none
		 ② Visibility attribute value: visible, the mouse pointer is on the element boundary, and the stroke attribute value is not none
		
  4. pointer-event:visibleFill;Applicable only to SVG elements, elements will only become targets of mouse events if:
		 ① Visibility attribute value: visible, and the mouse pointer is inside the element
		
  5. Pointer-event:visibleStroke;Applicable only to SVG elements, elements will only become targets of mouse events if:
		 ① Visibility attribute value: visible, and the mouse pointer is at the element boundary
		
  6. Pointer-event:visible;Applicable only to SVG elements, elements will only become targets of mouse events if:
		 ① Visibility attribute value: visible, and the mouse pointer is inside the element or boundary
		
  7. Pointer-event:fill;Applicable only to SVG elements, elements will only become targets of mouse events if:
		 ① When only the mouse pointer is inside the element
		
  8. Pointer-event:stroke;Applicable only to SVG elements, elements will only become targets of mouse events if:
		 ① When only the mouse pointer is on the element boundary
		
  9. Pointer-event:stroke;Applicable only to SVG elements, elements will only become targets of mouse events if:
		 ① When only the mouse pointer is inside or boundary

3. Note:

If pointer-event:none is set to the parent element, it does not mean that the event listener on the parent element will never be triggered. When the pointer-event value is set to the child element, it is not none.

 Then all events on the parent element can be triggered through the event propagation mechanism.

4. Pointer-event: none application scenarios:

1. Set pointer-event for any element: the effect of none is equivalent to input[type=text|button|radio|checkbox]Setting the disabled property can enable the disable event, for example:<a href="xxxxxx" style="pointer-events: none">click me</a>This link cannot be clicked, and hover has no effect, but you can select the element through the tab and press the enter key to trigger the link. When the href attribute is removed, it cannot be triggered through the tab.
    
 2. When you want to disable the select drop-down box, you can set pointer-event:none;

 3. When many elements need to be positioned on a map layer, absolutely and relatively positioned elements need to be used. In this way, these elements will cover the map layer below.

 So much so that the map layer cannot be operated.  At this time, the element is set to pointer-events: none, and then the map can be dragged and clicked.  But the operation area itself cannot operate

 Then, you can set the element area to pointer-events:auto