[CSS] pointer-events

  今天在 Front-End Developers Taiwan社群看到有人問 css3 的 pointer-events，感覺還蠻有趣的，就稍微研究一下。

  我自己實作了一下有點像是透過 css 達到 JavaScript的 preventDefault或是拖拉效果的功能。其主要常用的兩個屬性為 auto 以及 none，若設定 pointer-events: none主要達到下面四點功能:

• click 功能失效。
• 指標重置回預設樣式。
• hover以及 active樣式均失效。
• JavaScript 點擊功能失效。

JS Bin

  各位也可以去玩玩 google map的地圖圖層的控制項。原本下方這一塊 div是無法拖拉的，只要設定 pointer-events為 none就可以拖動下方圖層。不過上方控制項也不能夠操控了。(感覺是有點無力的豆知識就是。)

  目前 pointer-events在 ie支援不甚理想，有人列出整理表 - Can I use pointer-events?。