根據MDN上的解釋如下： CSS屬性pointer-events允許作者控制特定的圖形元素在何時成為屬性事件的target。當未指定該屬性時，SVG內容表現如同visiblePainted。 除了指定元素不成為鼠標事件的目標，none值還指示鼠標事件穿過該元素，并指向位于元素下面的元素 語法： pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit 屬性： auto

與pointer-events屬性未指定時的表現效果相同，對于SVG內容，該值與visiblePainted效果相同

none

元素永遠不會成為鼠標事件的target。但是，當其后代元素的pointer-events屬性指定其他值時，鼠標事件可以指向后代元素，在這種情況下，鼠標事件將在捕獲或冒泡階觸發父元素的事件偵聽器。

visiblePainted

只適用于SVG。元素只有在以下情況才會成為鼠標事件的目標： visibility屬性值為visible，且鼠標指針在元素內部，且fill屬性指定了none之外的值 visibility屬性值為visible，鼠標指針在元素邊界上，且stroke屬性指定了none之外的值

visibleFill

只適用于SVG。只有在元素visibility屬性值為visible，且鼠標指針在元素內部時,元素才會成為鼠標事件的目標，fill屬性的值不影響事件處理。

visibleStroke

只適用于SVG。只有在元素visibility屬性值為visible，且鼠標指針在元素邊界時,元素才會成為鼠標事件的目標，stroke屬性的值不影響事件處理。

visible

只適用于SVG。只有在元素visibility屬性值為visible，且鼠標指針在元素內部或邊界時,元素才會成為鼠標事件的目標，fill和stroke屬性的值不影響事件處理。

painted

只適用于SVG。元素只有在以下情況才會成為鼠標事件的目標： 鼠標指針在元素內部，且fill屬性指定了none之外的值 鼠標指針在元素邊界上，且stroke屬性指定了none之外的值 visibility屬性的值不影響事件處理。

fill

只適用于SVG。只有鼠標指針在元素內部時,元素才會成為鼠標事件的目標，fill和visibility屬性的值不影響事件處理。

stroke

只適用于SVG。只有鼠標指針在元素邊界上時,元素才會成為鼠標事件的目標，stroke和visibility屬性的值不影響事件處理。

all

只適用于SVG。只有鼠標指針在元素內部或邊界時,元素才會成為鼠標事件的目標，fill、stroke和visibility屬性的值不影響事件處理。 pointer-events如上述所言支持的值很多，但大多都與SVG相關，我們可以不用理會。而對于我們來講，需要注意的就是[none|auto]兩個屬性值了。“auto”沒什么好說的，就是在正常狀態下的元素。本文將著重研究一下“none”。 pointer-events:none顧名思意，就是讓任何鼠標元素對鼠標事件不起作用，這里的鼠標事件包括css中的hover，同時也會關閉js中的onclick。 pointer-events:none的作用不只是禁用鏈接hover，打開鏈接等效果，是真實意義上的將onlick事件去掉了。但是，他不會關閉鍵盤時間，比如點擊"tab"鍵會切換<a>標簽，設置了pointer-events:none的元素同樣有反應。

轉載于:https://www.cnblogs.com/bgwhite/p/9414309.html

總結

以上是生活随笔為你收集整理的pointer-events属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。