pointer-events

pointer-events Property is specified as a keyword selected from the list of values below.

auto

And pointer-events The performance effect is the same when the attribute is not specified. For SVG content, this value is the same as visiblePainted Same effect

none

Element will never become a mouse event target (en-US) 。 However, when the pointer-events Property, the mouse event can point to a descendant element. In this case, the mouse event will trigger the event listener of the parent element during the capture or bubbling phase.

visiblePainted

Only applicable to SVG. An element becomes the target of a mouse event only if:

• visibility The attribute value is visible , and the mouse pointer is inside the element, and fill Property specifies none Value other than
• visibility The attribute value is visible , the mouse pointer is on the element boundary, and stroke Property specifies none Value other than

visibleFill

Only applicable to SVG. Only in elements visibility The attribute value is visible , and the mouse pointer is inside the element, the element will become the target of the mouse event, fill Property does not affect event handling.

visibleStroke

Only applicable to SVG. Only in elements visibility The attribute value is visible , and the mouse pointer is at the element boundary, the element will become the target of the mouse event, stroke Property does not affect event handling.

visible

Only applicable to SVG. Only in elements visibility The attribute value is visible , and the mouse pointer is inside or at the boundary of the element, the element will become the target of the mouse event, fill and stroke Property does not affect event handling.

painted

Only applicable to SVG. An element becomes the target of a mouse event only if:

• The mouse pointer is inside the element, and fill Property specifies none Value other than
• The mouse pointer is on the element boundary, and stroke Property specifies none Value other than

visibility Property does not affect event handling.

fill

Only applicable to SVG. Only when the mouse pointer is inside the element will the element become the target of the mouse event, fill and visibility Property does not affect event handling.

stroke

Only applicable to SVG. Only when the mouse pointer is on the element boundary will the element become the target of the mouse event, stroke and visibility Property does not affect event handling.

all

Only applicable to SVG. Only when the mouse pointer is inside or at the boundary of the element will the element become the target of the mouse event, fill 、 stroke and visibility Property does not affect event handling.

Click the link http://example.com Will not jump

 < ul >
   < li > < a  href = " https://developer.mozilla.org/ " > MDN </ a > </ li >
   < li > < a  href = " http://example.com " > example.com </ a > </ li >
 </ ul >

 a[href=" http://example.com "]
 {
   pointer-events : none ;
 }

use pointer-events To prevent an element from becoming a mouse event target does not necessarily mean that the event listener on the element will never be triggered. If element descendants explicitly specify pointer-events Property and allow it to be the target of mouse events, then any event pointing to this element will pass through the parent element in the event propagation process and trigger the event listener on it in an appropriate way. Of course, mouse activity on the parent element but not on the descendant element will not be captured by the parent element and descendant element (mouse activity will pass through the parent element and point to the element below it).

We want to provide more sophisticated control over HTML (not just auto and none ）To control which part of the element will capture mouse events when. If you have a unique idea, please add it to Wiki page The Use Cases section of the pointer-events 。

This attribute can also be used to increase the frame rate when scrolling. Indeed, when the mouse hovers over some elements during scrolling, it triggers the hover effect on them. However, these effects are usually not noticed by users, and most of them lead to problems with scrolling. yes body Element application pointer-events：none , including disabled hover To improve scrolling performance.

• The SVG attribute pointer-events
• WebKit Specs PointerEventsProperty extended for use in (X)HTML content