pointer-events屬性
阿新 • • 發佈：2018-08-03
none 內部 需要 影響 打開 spa bili inter 作者 根據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的元素同樣有反應。
pointer-events屬性