首先看一下 MDN 上關於 pointer-events 的介紹：
CSS屬性
pointer-events允許作者控制特定的圖形元素在何時成為鼠標事件的 target。當未指定該屬性時，SVG 內容表現如同visiblePainted。除了指定元素不成為鼠標事件的目標，
none值還指示鼠標事件穿過該元素，並指向位於元素下面的元素。
官方的中文翻譯比較文藝，要多讀幾遍才能明白什么意思。
pointer-events 主要的用途還是穿透元素。直接看下面的示例。
示例
創建兩個 div 元素，在每個 div 元素上面添加一個遮罩層，其中的文字被蓋住了。為了顯得有文藝范，div 中的內容引用了莎士比亞的十四行詩。正常情況如下，因為 div 上面有遮罩層，所以無法選中文字。
Shall I compare thee to a summer's day? Thou art more lovely and more temperate: Rough winds do shake the darling buds of May, And summer's lease hath all too short a date: Sometime too hot the eye of heaven shines, And often is his gold complexion dimm'd; And every fair from fair sometime declines, By chance or nature's changing course untrimm'd; But thy eternal summer shall not fade Nor lose possession of that fair thou owest; Nor shall Death brag thou wander'st in his shade, When in eternal lines to time thou growest: So long as men can breathe or eyes can see, So long lives this and this gives life to thee.
添加 pointer-events: none 之后，就可以穿透遮罩層順利拷貝文字了。
我想將你比作迷人的夏日， 但汝卻更顯可愛和溫存： 狂野之風摧殘着五月蓓蕾的柔媚， 也一天天消逝着夏日的歸期： 蒼天的明眸偶然瀉出璀璨， 卻難以輝映他暗淡的容顏； 一切明媚的色彩漸已消褪， 過程是如此蒼白； 然而你卻如永恆之夏， 所有的美好永遠也不會改變； 就連死神也不敢對你囂張， 因你將永生於不朽的詩篇： 只要世人一息尚存， 你將和這詩篇永駐人間。
總結
除了常用的 pointer-events: none 之外，還有很多其他參數。關於 pointer-events 詳細介紹可以參考 MDN 上的內容。工作當中有很多應用場景，比如一些可以點擊的商品圖片，如果設計師在圖片上設計了遮罩層，那使用 pointer-events 的屬性無疑會很簡單。
